如何实现Vue.js组件中v-model的双向数据绑定示例？

本文共计494个文字，预计阅读时间需要2分钟。

我们都在使用v-model，其实它就是vue的一个语法糖，用于在表单控件或组件上创建双向数据绑定。

在表单控件上使用v-model： 以上代码展示了如何在表单控件上使用v-model进行双向绑定。

我们都清楚v-model其实就是vue的一个语法糖，用于在表单控件或者组件上创建双向绑定。

//表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input实现的效果是一样的--> <input type="text" :value="name" @input="name=e.target.vlaue"/> <input type="checkBox" :checked="checked" @click=e.target.checked/> {{name}} </template> <script> export default{ data(){ return { name:"", checked:false, } } } </script>

vue中父子组件的props通信都是单向的。父组件通过props向下传值给子组件，子组件通过$emit触发父组件中的方法。所以自定义组件是无法直接使用v-model来实现v-model双向绑定的。