我們?cè)谇岸碎_發(fā)中經(jīng)常看到:visible.sync這種修飾符，很多人不知道這是干什么的，

特別是在使用ElementUI的時(shí)候，里面有個(gè)彈窗el-dialog組件的時(shí)候會(huì)有用到:visible.sync

<el-button type="text" @click="centerDialogVisible = true">點(diǎn)擊打開 Dialog</el-button>
 
<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span>需要注意的是內(nèi)容是默認(rèn)不居中的</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">確 定</el-button>
  </span>
</el-dialog>
 
<script>
  export default {
    data() {
      return {
        centerDialogVisible: false
      };
    }
  };
</script>

:visible指的是屬性綁定，表示彈框的顯示隱藏，當(dāng):visible的值為ture的時(shí)候，彈框顯示，當(dāng)為false的時(shí)候，彈框隱藏

后面的.sync是什么意思呢，指的就是同步動(dòng)態(tài)雙向的來(lái)表示visible的值，當(dāng)我們關(guān)閉窗口的時(shí)候，這個(gè)彈框隱藏了，visible的值發(fā)生了變化，但是關(guān)閉窗口這個(gè)動(dòng)作，我們沒(méi)法用確定的動(dòng)作去判斷這個(gè)值，所以用到了vue中的雙向綁定的原則，在vue中統(tǒng)一加上了.sync來(lái)表示同步的修改了visible的值。

在有些情況下，我們可能需要對(duì)一個(gè) prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來(lái)維護(hù)上的問(wèn)題，因?yàn)樽咏M件可以變更父組件，且在父組件和子組件都沒(méi)有明顯的變更來(lái)源。

這也是為什么我們推薦以 update:myPropName 的模式觸發(fā)事件取而代之。舉個(gè)例子，在一個(gè)包含 title prop 的假設(shè)的組件中，我們可以用以下方法表達(dá)對(duì)其賦新值的意圖：

this.$emit('update:title', newTitle)

然后父組件可以監(jiān)聽(tīng)那個(gè)事件并根據(jù)需要更新一個(gè)本地的數(shù)據(jù) property。例如：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

為了方便起見(jiàn)，我們?yōu)檫@種模式提供一個(gè)縮寫，即 .sync 修飾符：

<text-document v-bind:title.sync="doc.title"></text-document>

注意帶有 .sync 修飾符的 v-bind 不能和表達(dá)式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無(wú)效的)。取而代之的是，你只能提供你想要綁定的 property 名，類似 v-model。

當(dāng)我們用一個(gè)對(duì)象同時(shí)設(shè)置多個(gè) prop 的時(shí)候，也可以將這個(gè) .sync 修飾符和 v-bind 配合使用：

<text-document v-bind.sync="doc"></text-document>

這樣會(huì)把 doc 對(duì)象中的每一個(gè) property (如 title) 都作為一個(gè)獨(dú)立的 prop 傳進(jìn)去，然后各自添加用于更新的 v-on 監(jiān)聽(tīng)器。

將 v-bind.sync 用在一個(gè)字面量的對(duì)象上，例如 v-bind.sync=”{ title: doc.title }”，是無(wú)法正常工作的，因?yàn)樵诮馕鲆粋€(gè)像這樣的復(fù)雜表達(dá)式的時(shí)候，有很多邊緣情況需要考慮。

vue官網(wǎng)：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修飾符

到此這篇關(guān)于:visible.sync 的作用的文章就介紹到這了,更多相關(guān):visible.sync 的作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論