接上一篇。
七、v-model深入學習
<html>
<head><title>組件基礎-4</title><style>.score {display: inline-block;}.score>span {display: inline-block;width: 25px;height: 25px;background: url(./assets/star.png) center center / 25px 25px;cursor: pointer;}.score>span.on {background: url(./assets/star-on.png) center center / 25px 25px;}</style>
</head>
<body><div id="app"><h1>售后評分</h1><score-1 v-model.number='speed'>配送速度：</score-1><br><score-1 v-model.number='service'>服務質量：</score-1><br><score-1 v-model.number='exp'>用戶體驗：</score-1><br><textarea name="" id="" cols="30" rows="3" v-model.lazy='desc'></textarea><br><button @click='submit'>提交</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 評分組件Vue.component('score-1',{template: `<div class="score"><slot name='default'></slot><span v-for='(i, index) in 5' v-bind:class='{on: value>=i}' v-on:click='$emit("input", i)'></span><slot name='xxx'></slot></div>`,props: {value: {type: Number, default: 0}}})const app = new Vue({el: '#app',data: {speed: 0,service: 0,exp: 0,desc: ''},methods: {submit() {// 提交接口入參const data = {speed: this.speed,service: this.service,exp: this.exp,desc: this.desc}console.log('提交評價', data)}}})</script></body>
</html>
1、在組件中，可以把
<score-1 v-bind:value="num" v-on:input='num = $event'>寫成
<score-1 v-model='num'>2、在組件中，v-model='num' 等于 v-bind:value='num' + v-on:input='num = $event'
是一個語法糖，相當于這兩個的簡寫。
3、自定義組件，除了封裝（可維護），還可以復用（快速開發）
4、v-model對不同的表單來講是不一樣的
（1）對text和textarea文本表單，v-model 等于 v-bind:value + v-on:input
（2）對checkbox和radio選擇框，v-model 等于 v-bind:checked + v-on:change
（3）對select下拉框，v-model 等于 v-bind:value + v-on:change
八、簡單案例：封裝一個彈窗組件
1、代碼
<html>
<head><title>組件基礎-5</title><style>.layer {background: rgba(0, 0, 0, 0.6);position: absolute;top: 0;bottom: 0;left: 0;right: 0;transition: all ease 0.1s;}.modal {position: absolute;top: 100px;left: 50%;width: 500px;margin-left: -260px;border-radius: 3px;background: white;}header {line-height: 50px;box-sizing: border-box;padding: 0 20px;font-size: 14px;overflow: hidden;border-bottom: 1px solid #eee;}.title {float: left;}.close {float: right;cursor: pointer;}main {box-sizing: border-box;padding: 20px;font-size: 14px;}footer {line-height: 50px;border-top: 1px solid #eee;overflow: hidden;height: 51px;}footer>span {float: right;height: 30px;line-height: 28px;margin-right: 20px;cursor: pointer;padding: 0 20px;margin-top: 10px;font-size: 12px;border: 1px solid #ccc;border-radius: 2px;}footer>span.primary {border-color: blue;background: blue;color: white;}</style>
</head>
<body><div id="app"><button @click='show=true'>修改</button><tc-modal title="修改用戶信息" @close='onClose' @submit='onSubmit' :show='show'><div><span>用戶名：</span><input type="text" v-model="name"/></div></tc-modal></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><!-- 視圖結構 --><script type="text/x-template" id="modal"><div class='layer' v-if='show'><div class='modal'><header><span class='title' v-text='title'></span><span class='close' @click='$emit("close")'>X</span></header><main><slot>主體區域</slot></main><footer><span class='primary' @click='$emit("submit")'>確定</span><span @click='$emit("close")'>取消</span></footer></div></div></script><script>// 封裝彈窗組件Vue.component('tc-modal', {template: '#modal',props: {title: {type: String, default: '標題'},show: {type: Boolean, default: false}}})const app = new Vue({el: '#app',data: {name: '',show: false},methods: {onClose() {console.log('---關閉')this.show = falsethis.name = ''},onSubmit() {console.log('---提交', this.name)//這里可以調接口this.show = falsethis.name = ''}}})</script></body>
</html>
2、說明
自定義屬性，給你一個屬性
自定義事件，給你一個事件
自定義插槽，給你一塊視圖結構
