vue .sync修飾符的使用詳解

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

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

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

2.3.0+ 新增

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

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

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

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

<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>

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

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

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

以下為代碼實例

father.vue

<template>
 <div class="hello">
 //input實時改變wrd的值, 并且會實時改變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>

那這個修飾符的原理是什么呢？其實還是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) {
  //往父級發(fā)射incre事件
  this.$emit('incre', ++this.num)
 }
 },
}
</script>

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

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) {
  //往父級發(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) {
  //往父級發(fā)射incre事件
  this.$emit('update:word', newword)
 }
 },
}
</script>

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

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

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

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

father.vue

<template>
 <div class="hello">
 //input實時改變wrd的值, 并且會實時改變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>

利用了父級可以在子元素上監(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) {
  //往父級發(fā)射incre事件
  this.$emit('incre', ++this.num)
 }
 },
}
</script>
<style scoped></style>

總結(jié)

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

您可能感興趣的文章: