Vue知識點 sync修飾符

2022-07-25 04:30:12 字數 2627 閱讀 1657

乙個元件上只能定義乙個v-model,如果其他prop也要實現雙向繫結的效果該怎麼辦呢? 簡單的方法是子元件向父元件傳送乙個事件,父元件監聽該事件,然後更新prop。具體如下:

// info.vue元件定義了乙個value 屬性, 和乙個valuechanged事件

div>

template>

export default

},methods:

}}script>

父元件index.vue

myvalue = e">info>

template>

inport info from './info.vue';

export default ,

data() },}

script>

上述寫法太麻煩了,通過.sync可以簡化上面**,只需要修兩個地方:

元件內觸發的事件名稱以「update:mypropname」命名,相應的上述info元件改為 update:value

父元件v-bind:value 加上.sync修飾符,即 v-bind:value.sync

這樣父元件就不用再手動繫結@update:value事件了。

用法1: v-bind:prop.sync="propvalue"

// info.vue元件

...methods:

}

// index.vue元件

"myvalue">info>

用法2 v-bind.sync="obj"

如果乙個元件的多個prop都要實現雙向繫結,根據上面學到的知識,只需要每個prop加sync修飾符

sync="value1" :b.sync="value2" :c.sync="value2" :d.sync="value2">

這樣寫太麻煩,vue提供了一種更簡便的方法, v-bind.sync = "物件"

info>

.....

data() }..

script>

帶有.sync修飾符的v-bind不能喝表示式一起使用(例如 v-bind:title.sync = "doc.title + '!'"是無效的)。取而代之的是,你只能你想要繫結的屬性名。

乙個元件需要提供多個雙向繫結的屬性時使用,只能選用乙個屬性來提供 v-model 功能,但如果有其他屬性也要提供雙向繫結,就需要.sync

乙個元件上只能定義乙個v-model,如果其他prop也要實現雙向繫結的效果該怎麼辦呢? 簡單的方法是子元件向父元件傳送乙個事件,父元件監聽該事件,然後更新prop。具體如下:

// info.vue元件定義了乙個value 屬性, 和乙個valuechanged事件

div>

template>

export default

},methods:

}}script>

父元件index.vue

myvalue = e">info>

template>

inport info from './info.vue';

export default ,

data() },}

script>

上述寫法太麻煩了,通過.sync可以簡化上面**,只需要修兩個地方:

元件內觸發的事件名稱以「update:mypropname」命名,相應的上述info元件改為 update:value

父元件v-bind:value 加上.sync修飾符,即 v-bind:value.sync

這樣父元件就不用再手動繫結@update:value事件了。

用法1: v-bind:prop.sync="propvalue"

// info.vue元件

...methods:

}

// index.vue元件

"myvalue">info>

用法2 v-bind.sync="obj"

如果乙個元件的多個prop都要實現雙向繫結,根據上面學到的知識,只需要每個prop加sync修飾符

sync="value1" :b.sync="value2" :c.sync="value2" :d.sync="value2">

這樣寫太麻煩,vue提供了一種更簡便的方法, v-bind.sync = "物件"

info>

.....

data() }..

script>

帶有.sync修飾符的v-bind不能喝表示式一起使用(例如 v-bind:title.sync = "doc.title + '!'"是無效的)。取而代之的是,你只能你想要繫結的屬性名。

乙個元件需要提供多個雙向繫結的屬性時使用,只能選用乙個屬性來提供 v-model 功能,但如果有其他屬性也要提供雙向繫結,就需要.sync

關於vue修飾符 sync

vue是單項資料流,所以要對他進行雙向資料繫結的時候需要用到.sync修飾符,最常用的是visible.sync 在子元件裡寫 this.emit update visible visible 使用update my prop name 的模式觸發事件 父元件裡 isvisible update v...

深入解讀Vue修飾符sync

在一些情況下,我們可能會需要對乙個 prop 父子元件傳遞資料的屬性 進行 雙向繫結 在vue 1.x 中的 sync 修飾符所提供的功能。當乙個子元件改變了乙個帶 sync 的prop的值時,這個變化也會同步到父元件中所繫結的值。這很方便,但也會導致問題,因為它破壞了單向資料流。資料自上而下流,事...

Vue 指令及修飾符 sync 詳解

目錄 1 指令及其語法 2 指令的修飾符 3 都有哪些指令修飾符 4 深入理解 sync 指令修飾符 vue 模板語法中的 v text v html v pre 都是指令,它起到一種命令或指示的效果,語法 如下 v 指令名 引數 值如 v on click add 如果值裡沒有特殊字元,則可以不加...