深入理解vue 修飾符sync【 vue sync修飾符示例】

在說vue 修飾符sync前，我們先看下官方文檔：vue .sync 修飾符，里面說vue .sync 修飾符以前存在於vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 發布之后的實際應用中，我們發現 .sync 還是有其適用之處，比如在開發可復用的組件庫時。我們需要做的只是讓子組件改變父組件狀態的代碼更容易被區分。從 2.3.0 起我們重新引入了 .sync 修飾符，但是這次它只是作為一個編譯時的語法糖存在。它會被擴展為一個自動更新父組件屬性的 v-on 監聽器。
示例代碼如下：

<comp :foo.sync="bar"></comp>

 

會被擴展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

 

當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：

this.$emit('update:foo', newValue)

 

猛一看不明白，下邊我么通過一個實例（彈窗的關閉事件）來說明這個代碼到底是怎么運用的。

<template>
    <div class="details">
        <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <button @click="changeValue">toggle</button>
    </div>
</template>
<script>
import Vue from 'vue' Vue.component('myComponent', { template: `<div v-if="show"> <p>默認初始值是{{show}}，所以是顯示的</p> <button @click.stop="closeDiv">關閉</button> </div>`, props:['show'], methods: { closeDiv() { this.$emit('update:show', false); //觸發 input 事件，並傳入新值  } } }) export default{ data(){ return{ valueChild:true, } }, methods:{ changeValue(){ this.valueChild = !this.valueChild } } } </script>

 

動態效果如下：

 

GIF.gif

vue 修飾符sync的功能是：當一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定。如果我們不用.sync，我們想做上面的那個彈窗功能，我們也可以props傳初始值，然后事件監聽，實現起來也不算復雜。這里用sync實現，只是給大家提供一個思路，讓其明白他的實現原理，可能有其它復雜的功能適用sync。

這只是一個簡單的例子，看完這個不知你是不覺得有個指令跟這個很相似，v-model？對，就是v-model在組件上使用的時候。

作者：_小坦克_
歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。