我們在前端開發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，

特別是在使用ElementUI的時候，里面有個彈窗el-dialog組件的時候會有用到: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的時候，彈框顯示，當(dāng)為false的時候，彈框隱藏

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

在有些情況下，我們可能需要對一個 prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護(hù)上的問題，因為子組件可以變更父組件，且在父組件和子組件都沒有明顯的變更來源。

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

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

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

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

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

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

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

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

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

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

將 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=”{ title: doc.title }”，是無法正常工作的，因為在解析一個像這樣的復(fù)雜表達(dá)式的時候，有很多邊緣情況需要考慮。

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

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

最新評論