示例
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>
观察代码发现，name的input 多了一个事件绑定@input="name=$event.target.value"
所以，实现数据双向绑定的原理就是：
1、数据name单向传递给input； 2、input触发事件后将name的值进行了修改
自定义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>
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>
启动调试
$ vue serve main.vue
这样就实现了自定义v-model语法
原理很简单
1、父组件给子组件传值 2、子组件值修改，触发事件修改父组件值 3、父组件再将新值传递给了子组件，子组件的接收到父组件变更的值
所以还是数据还是单向流动
参考：
![[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法](https://ucc.alicdn.com/pic/developer-ecology/iwb4s2erfjeee_d14da44e4e4d4f2ab6c458dc8c34c9f5.png?x-oss-process=image/resize,h_160,m_lfit)