Vue:自定义v-model数据双向绑定

示例

age 数据单向绑定
name 数据双向绑定

<template> <div> <h3>单向绑定数据</h3> <p>age: {{ age }}</p> <p>age: <input type="text" :value="age"></p> <h3>双向绑定数据</h3> <p>name: {{name}}</p> <p>name: <input type="text" :value="name" @input="name=$event.target.value"></p> </div>
</template>


<script>
export default { data(){ return { age: 23, name: "王小二" } }
}

</script>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
 

观察代码发现，name的input 多了一个事件绑定@input="name=$event.target.value"
所以，实现数据双向绑定的原理就是：

1、数据name单向传递给input；
2、input触发事件后将name的值进行了修改

  

 

  
1
  
2
 

自定义v-model双向绑定

child.vue

<template> <input type="text" :value="age" @input="change($event.target.value)">
</template>


<script>
export default { props: ["age"], model: { prop: "age", // 对应的变量 event: "change"  // 触发事件 }, methods: { // 把修改后的值传递回去 change(value){ console.log(value) this.$emit('change', value) } }
}

</script>



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
 

main.vue

<template> <div> <h3>子组件v-model示例</h3> <p>age: {{age}}</p> <p>age: <Child v-model="age"/></p> </div>
</template>


<script>
import Child from './child.vue';

export default { components: { Child }, data(){ return { age: 23, } }
}

</script>



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
 

启动调试

$ vue serve main.vue

  

 

  
1
 

这样就实现了自定义v-model语法
原理很简单

1、父组件给子组件传值
2、子组件值修改，触发事件修改父组件值
3、父组件再将新值传递给了子组件，子组件的接收到父组件变更的值

  

 

  
1
  
2
  
3
 

所以还是数据还是单向流动

参考：

1. Vue之自定义组件的v-model
2. vue自定义组件上的v-model如何与子组件数据绑定

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/100578613