vueカスタムコンポーネントv-model双方向バインディング、親子コンポーネント同期通信の複数の書き方

前の文章はVueカスタムコンポーネントのv-modelを分析します。を紹介しました。参考にしてください。次に、本文を通して、Vueカスタムコンポーネントv-model双方向バインディング、親子コンポーネント同期通信の複数の書き方を紹介します。詳細は以下の通りです。
親子コンポーネント通信は一つの項目で、双方向通信が必要な場合が多いです。方法は以下の通りです
1、親コンポーネント使用：msg.sync="aa"  サブコンポーネント$emit('update:msg', 'msgを使用して変更された値xxx'
2、親コンポーネントの値は直接オブジェクトに伝え、サブアセンブリはオブジェクトを受け取ったら、オブジェクトの属性を勝手に変えることができますが、オブジェクト自体を変えることはできません。
3、親コンポーネント使用：v-model
一つ目は廃止されたことがあります。メンテナンスコストのために削除されましたが、確かに存在意義があります。
最初の種類:
親コンポーネント:

<template>
 <div>
  <aa class="abc" :snycTest.sync="test" ></aa>
   {{'    ：' + test}}
  <button @click="fn">
         
  </button>  
 </div>
</template>
<script>
import aa from './test.vue'
 export default {
  data () {
   return {
    test: ''
   }
  },
  methods: {
   fn () {
    this.test += 1
   }
  },
  components:{
   aa
  }
 }
</script>

サブコンポーネント:

<template>
 <div>
  <ul>
   <li>{{'    ：'+ snycTest}}</li>
   <button @click="fn2">      </button>
  </ul>
 </div>
</template>
<script>
 export default {
  props: {
   snycTest: ''
  },
  methods: {
   fn2 () {
    this.$emit('update:snycTest', this.snycTest+1) //      update:snycTest                  test   this.snycTest+1，       。
} } } </script>

v-model書き方一：
親コンポーネント:

<template>
 <div>
  <aa class="abc" v-model="test" ></aa> //      v-model
   {{'    ：' + test}} //     test   msg        
  <button @click="fn">
         
  </button>
  
 </div>
</template>
<script>
import aa from './test.vue'
 export default {
  data () {
   return {
    test: ''
   }
  },
  methods: {
   fn () {
    this.test += 1 
   }
  },
  components:{
   aa
  }
 }
</script>

サブコンポーネントの書き方一：

<template>
 <div>
  <ul>
   <li>{{'    ：'+ msg}}</li>
   <button @click="fn2">      </button>
  </ul>
 </div>
</template>
<script>
 export default {
  model: {  //   model，   2   ，prop   ，   msg         （   aa        ）v-model     ，event ， emit ‘cc'    ，         v-model    。
   prop: 'msg',
   event: 'cc'
  },
  props: {
   msg: ''
  },
  methods: {
   fn2 () {
    this.$emit('cc', this.msg+2)
   }
  }
 }
</script>

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双方向バインディング、亲子コンポーネントの同期通信の多种の书き方です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。