深刻理解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在組件上使用的時候。

做者：_小坦克_
歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。