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双向绑定、 父子组件同步通信的多种写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!