v-model的本质是对自定义属性和自定义事件的综合使用。默认情况下是value属性和input事件。具体来说:
1 // 1. v-model 在表单元素上使用
2 <input v-model = "xxx"/>
3
4 // 2. v-model 在自己定义的组件上使用
5 <MyCom v-model = "xxx"/>
6 上面的写法是快捷方式,它等价于如下复杂写法:
7 <MyCom :value = "xxx" @input = "新值 => xxx = 新值"/>
8
9 // v-model 做两件事:
10 // 1. 向子组件传来一个名为 value 的属性
11 // 2. 在子组件监听 input 事件,这个事件的回调中修改 value 所绑定的值
12 // 3.一个指令实现两个功能：子传父（input事件），父传子（value属性）
示例:
App.vue
1 <template>
2 <div style="border:1px solid #ccc; padding:2em; margin:2em;">
3 父组件, {{xxx}}
4 <MyCom v-model="xxx" />
5 <!-- <MyCom :value="xxx" @input="fn"/> -->
6 </div>
7 </template>
8
9 <script>
10 import MyCom from './MyCom.vue'
11 export default {
12 data(){
13 return {
14 xxx: 100
15 }
16 },
17 methods:{
18 fn(a){
19 console.log(a)
20 this.xxx = a
21 }
22 },
23 components: { MyCom }
24 }
25 </script>
MyCom.vue
1 <template>
2 <div style="border:1px solid #ccc; padding:2em; margin:2em;">
3 <h2>子组件, {{value}}</h2>
4 <button @click="fn">抛出input</button>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 props: ['value'],
11 methods:{
12 fn(){
13 this.$emit('input', 200)
14 }
15 }
16 }
17 </script>
