• 1. 父組件傳遞數(shù)據(jù)時，子組件用props接受 父組件里面有事件 可以改變 自身data里面的數(shù)據(jù)，然后通過props傳遞從而改變子組件的顯示數(shù)據(jù)。
• 2. 但同時 子組件里面也可能有事件可以更新props傳遞過來的數(shù)據(jù)，不需要通過子組件的this.$emit(‘自定義事件名稱’) 自定義事件來讓父組件綁定@ 事件 從而改變 父組件里面的data數(shù)據(jù)。

這樣會比較麻煩，因為這樣的話 子組件派發(fā)的事件，要讓父組件執(zhí)行， .sync 修飾符就解決了 ，父組件不需要定義事件就能實現(xiàn)類似于 v-modle 這樣的效果， 子組件也可以更新父組件里面的數(shù)據(jù)。

通過一個簡單的案例：

思路：父組件的狀態(tài)，通過props傳遞，父組件本身可以改變data里面的數(shù)據(jù)， 子組件也可以也有事件可以改變父組件里面的傳過來的數(shù)據(jù)，其實的話是一種語法糖

父組件

<template>
  <div id="app">
    <myComponent :show.sync='valueChild' :data.sync='msg' style="padding: 50px 50px 30px 5px;border:1px solid red;margin-bottom: 10px;"></myComponent>
 其實是一種語法糖：
會被擴展為： <myComponent :show='valueChild' @update:show="val=>valueChild=val"></myComponent>

     <button @click="changeValue">toggle</button>
  </div>
  
</template>

<script>
import myComponent from './components/myComponent'

export default {
  name: 'app',
  components: {
    myComponent
  },
  data(){
        return{
            valueChild:true,
            msg:"xxx"
        }
    },
  methods:{
     changeValue(){
            this.valueChild = !this.valueChild
        },
       
  }
}

</script>

<style>

</style>

子組件

<template>
  <div v-if="show">
                    <p>默認初始值是{{show}}，所以是顯示的</p>
                    <button @click.stop="closeDiv">關閉</button>
     <h1>{{data}}</h1>
                 </div>
</template>

<script>
export default {
  name: 'myComponent',
  data(){
    return {
    }
  },
   props:['show','data'],
  methods:{
     closeDiv() {
          this.$emit('update:show',false); //觸發(fā) input 事件，并傳入新值
        }
  }
}
</script>


<style scoped>

</style>