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