vue中sync的使用原來這么簡單

sync的使用場景

有些時候子組件需要修改父組件傳遞過來的prop,
要去改變父組件的狀態的時候就需要使用aync
看見這里有些同學可能會問？？
不是說不可以修改父組件傳遞到子組件的值嗎?
為啥要修改了呢？？難道不會報錯嗎警告嗎？

正常情況下，確實不可以去修改父組件傳遞給子組件中的值！
你修改后會把警告.【如下圖】
但是有些時候我們又需要去修改父組件傳遞給子組件中的值
我們可以這樣來做？

sync修飾符的功能

sync修飾符可以雙向綁定父子組件中的數據

場景的使用

我們下面來做一個這樣的案例
點擊父組件的按鈕，隱藏子組件
點擊子組件的按鈕，也將子組件隱藏
<test-com :ishow="flag"></test-com>
我們將控制變量flag綁定在組件上

案例

父組件

<template>
  <div>
    請問
    <el-button @click="fatherHander">切換-父按鈕</el-button>
    <test-com :ishow.sync="flag"></test-com>
  </div>
</template>

<script>
import testcom from "../components/test-com.vue"
  export default {
    data(){
      return{
        flag:true
      }
    },
    components:{
      'test-com':testcom
    },
    methods:{
      fatherHander(){
        this.flag=!this.flag
      }
    },
  }
</script>

子組件

<template>
    <div v-if="ishow" class="demo">
        <h2>我是子組件</h2>
        <h3>我是子組件中的信息</h3>
        <h3>我是子組件中的信息</h3>
        <el-button @click="sonHander">切換-子組件按鈕</el-button>
    </div>
</template>

<script>
    export default {
        props:{ 
            ishow:{
                type:Boolean
            }
        },
        methods:{
            sonHander(){
                // 注意單詞不要寫錯了，update是跟家規定的，不能寫成其他值。
                // ishow表示你跟新哪一個值，
                // 將ishow的是跟新為false
                this.$emit('update:ishow',false)
            }
        }
    }
</script>

為啥這樣可以修改父組件中的值

我們的子組件中有這樣一行代碼
this.$emit('update:ishow',false)
它可以去跟新父組件中的ishow,將它的值更改為false
有的同學會說：我不使用sync可以更改嗎？可以的
這樣來處理，子組件不改變代碼，父組件改成這樣

<template>
  <div>
    請問
    <el-button @click="fatherHander">切換-父按鈕</el-button>
    <!-- 縮寫的版本 -->
    <!-- <test-com :ishow.sync="flag"></test-com> -->

    <!-- 沒有被縮寫的 -->
    <!-- value 子組件傳遞過來的參數 -->
    <!-- <test-com :ishow="flag" @update:ishow="value=>flag=value"></test-com> -->

    <!-- 與上面的等價哈 -->
    <test-com :ishow="flag" @update:ishow="function(value){  flag=value  }"></test-com>
    <!--  -->
  </div>
</template>

<script>
import testcom from "../components/test-com.vue"
  export default {
    data(){
      return{
        flag:true
      }
    },
    components:{
      'test-com':testcom
    },
    methods:{
      fatherHander(){
        this.flag=!this.flag
      }
    },
  }
</script>

尾聲

其實上面的沒有被縮寫的方法就是sync的語法糖
我們使用了sync就是幫我寫了沒有壓縮的那幾句代碼
@update:ishow="value=>flag=value"或者
@update:ishow="function(value){  flag=value  }"
看到這里聰明的小伙伴你一定是懂了sync了吧
最后逼逼一句，sync這個語法糖只有在2.3.0這個版本以及上才會有這個方法
要是不懂的話揍我一頓
（開玩笑的，如果你覺得我寫的不錯的話，點個贊，或者給我打賞一下）
已經三個月沒有吃辣條了