vue 自定义组件 v-model双向绑定、 父子组件同步通(2)
v-model写法二
父组件 <aa class="abc" v-model='test' ></aa>
。
子组件
<template> <div> <ul> <li>{{'里面的值:'+ value}}</li> // 组件使用时有v-model属性,value初始传的‘what' 不会被渲染,而是v-model绑定的test值被渲染,这儿value会被重新赋值为v-model绑定的test的值。 <button @click="fn2">里面改变外面</button> </ul> </div> </template> <script> export default { props: { value: { // 必须要使用value default: '', }, }, methods: { fn2 () { this.$emit('input', this.value+2) // 这儿必须用input 发送数据,发送的数据会被父级v-model=“test”接受到,再被value=test传回来。 } } }
一般双向绑定用v-model写法一。
总结
以上所述是小编给大家介绍的vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!