示例
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、数据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
1、父组件给子组件传值 2、子组件值修改，触发事件修改父组件值 3、父组件再将新值传递给了子组件，子组件的接收到父组件变更的值
所以还是数据还是单向流动
参考：
Vue之自定义组件的v-modelvue自定义组件上的v-model如何与子组件数据绑定
