vue 自定义组件 v-model双向绑定、 父子组件同步通信

子组件
<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传回来。
      }
    }
  }

父组件写法：
<category-btn v-model="maskLayerShow"></category-btn> 

import CategoryBtn from '../childCom/CategoryBtn.vue'

export default {
    components: {
      CategoryBtn,
    },
    data () {
      return {
        maskLayerShow: false,
      }
    },
}

 

参考自：https://www.cnblogs.com/gsgs/p/7294160.html