vue .sync修飾符的使用詳解

更新時(shí)間：2018年06月15日 13:45:39 作者：再見眸似霜

這篇文章主要介紹了vue .sync修飾符的使用,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue的官網(wǎng)介紹非常不錯(cuò)，先通讀一遍。

2.3.0+ 新增

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

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

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

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

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

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

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

當(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è)屬性 (如 title ) 都作為一個(gè)獨(dú)立的 prop 傳進(jìn)去，然后各自添加用于更新的 v-on 監(jiān)聽器。

以下為代碼實(shí)例

father.vue

<template>
 <div class="hello">
 //input實(shí)時(shí)改變wrd的值, 并且會(huì)實(shí)時(shí)改變box里的內(nèi)容
 <input type="text" v-model="wrd">
 <box :word.sync="wrd" ></box>
 </div>
</template>
<script>
import box from './box' //引入box子組件
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 components: {
 box
 } 
}
</script>
child.vue
<template>
 <div class="hello">
 <div class="ipt">
  <input type="text" v-model="str">
 </div>
 //word是父元素傳過來的
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  str: '',
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(newValue, oldValue) {
  //每當(dāng)str的值改變則發(fā)送事件update:word , 并且把值傳過去
  this.$emit('update:word', newValue)
 }
 }
}
</script>

那這個(gè)修飾符的原理是什么呢？其實(shí)還是vue父組件可以監(jiān)聽子組件的事件，自組件可以觸發(fā)父組件的事件

father.vue

<template>
 <div class="hello">
 <input type="text" v-model="wrd">
 <box @incre="boxIncremend" ></box>
 </div>
</template>
<script>
import box from './box'
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 methods: {
 boxIncremend(e) {
  this.wrd = this.wrd + e
 }
 },
 components: {
 box
 }
}
</script>
child.vue
<template>
 <div class="hello">
  <input type="text" v-model="str">
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  num: 0
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(neww, old) {
  //往父級(jí)發(fā)射incre事件
  this.$emit('incre', ++this.num)
 }
 },
}
</script>

在沒有sync的時(shí)候，我們要實(shí)現(xiàn)雙向綁定，可能需要在父組件里綁定一個(gè)事件和一個(gè)值

father.vue

<template>
 <div class="hello">
 <input type="text" v-model="wrd">
 <box @incre="boxIncremend" :word="word"></box>
 </div>
</template>
<script>
import box from './box'
export default {
 name: 'HelloWorld',
 data() {
 return {
  word: ''
 }
 },
 methods: {
 boxIncremend(newword) {
  this.word = newword
 }
 },
 components: {
 box
 }
}
</script>
child.vue
<template>
 <div class="hello">
  <input type="text" v-model="str">
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 props: {
 word: ''
 },
 watch: {
 str: function(newword) {
  //往父級(jí)發(fā)射incre事件
  this.$emit('incre', newword)
 }
 },
}
</script>

但是有了sync之后，我們就可以這么寫

father.vue

<template>
 <div class="hello">
 <input type="text" v-model="wrd">
 <box :wrd.sync="wrd"></box>
 </div>
</template>
<script>
import box from './box'
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 methods: {
 boxIncremend(e) {
  this.wrd = e
 }
 },
 components: {
 box
 }
}
</script>

child.vue

<template>
 <div class="hello">
  <input type="text" v-model="str">
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 props: {
 word: ''
 },
 watch: {
 str: function(newword) {
  //往父級(jí)發(fā)射incre事件
  this.$emit('update:word', newword)
 }
 },
}
</script>

父組件中的子組件，少寫了一個(gè)自定義事件屬性，子組件中$emit直接出發(fā)父組件中數(shù)據(jù)的更新，清新明了。使用中需要注意的是，update和后面對(duì)應(yīng)的數(shù)據(jù)名不能寫錯(cuò)。

父子組件的雙向數(shù)據(jù)綁定

父組件改變數(shù)據(jù)可以改變子組件, 但是子組件的內(nèi)容改變并不會(huì)影響到父組件

可以通過2.3.0新增的sync修飾符來達(dá)到雙向綁定的效果

father.vue

<template>
 <div class="hello">
 //input實(shí)時(shí)改變wrd的值, 并且會(huì)實(shí)時(shí)改變box里的內(nèi)容
 <input type="text" v-model="wrd">
 <box :word.sync="wrd" ></box>
 </div>
</template>
<script>
import box from './box' //引入box子組件
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 components: {
 box
 } 
}
</script>
<style scoped></style>

box.vue

<template>
 <div class="hello">
 <div class="ipt">
  <input type="text" v-model="str">
 </div>
 //word是父元素傳過來的
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  str: '',
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(newValue, oldValue) {
  //每當(dāng)str的值改變則發(fā)送事件update:word , 并且把值傳過去
  this.$emit('update:word', newValue)
 }
 }
}
</script>
<style scoped></style>

利用了父級(jí)可以在子元素上監(jiān)聽子元素的事件

father.vue

<template>
 <div class="hello">
 <input type="text" v-model="wrd">
 <box @incre="boxIncremend" ></box>
 </div>
</template>
<script>
import box from './box'
export default {
 name: 'HelloWorld',
 data() {
 return {
  wrd: ''
 }
 },
 methods: {
 boxIncremend(e) {
  this.wrd = this.wrd + e
 }
 },
 components: {
 box
 }
}
</script>
<style scoped></style>

box.vue

<template>
 <div class="hello">
  <input type="text" v-model="str">
 <h2>{{ word }}</h2>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  num: 0
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(neww, old) {
  //往父級(jí)發(fā)射incre事件
  this.$emit('incre', ++this.num)
 }
 },
}
</script>
<style scoped></style>

總結(jié)

以上所述是小編給大家介紹的vue .sync修飾符的使用，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: