中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue .sync修飾符的使用詳解

發布時間:2020-10-05 22:30:47 來源:腳本之家 閱讀:252 作者:再見眸似霜 欄目:web開發

vue的官網介紹非常不錯,先通讀一遍。

2.3.0+ 新增

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

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

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

然后父組件可以監聽那個事件并根據需要更新一個本地的數據屬性。例如:

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

為了方便起見,我們為這種模式提供一個縮寫,即 .sync 修飾符:

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

當我們用一個對象同時設置多個 prop 的時候,也可以將這個 .sync 修飾符和  v-bind 配合使用:

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

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

以下為代碼實例

father.vue

<template>
 <div class="hello">
 //input實時改變wrd的值, 并且會實時改變box里的內容
 <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是父元素傳過來的
 <h3>{{ word }}</h3>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  str: '',
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(newValue, oldValue) {
  //每當str的值改變則發送事件update:word , 并且把值傳過去
  this.$emit('update:word', newValue)
 }
 }
}
</script>

那這個修飾符的原理是什么呢?其實還是vue父組件可以監聽子組件的事件,自組件可以觸發父組件的事件

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">
 <h3>{{ word }}</h3>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  num: 0
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(neww, old) {
  //往父級發射incre事件
  this.$emit('incre', ++this.num)
 }
 },
}
</script>

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

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">
 <h3>{{ word }}</h3>
 </div>
</template>
<script>
export default {
 name: 'box',
 props: {
 word: ''
 },
 watch: {
 str: function(newword) {
  //往父級發射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">
 <h3>{{ word }}</h3>
 </div>
</template>
<script>
export default {
 name: 'box',
 props: {
 word: ''
 },
 watch: {
 str: function(newword) {
  //往父級發射incre事件
  this.$emit('update:word', newword)
 }
 },
}
</script>

父組件中的子組件,少寫了一個自定義事件屬性,子組件中$emit直接出發父組件中數據的更新,清新明了。使用中需要注意的是,update和后面對應的數據名不能寫錯。

父子組件的雙向數據綁定

父組件改變數據可以改變子組件, 但是子組件的內容改變并不會影響到父組件

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

father.vue

<template>
 <div class="hello">
 //input實時改變wrd的值, 并且會實時改變box里的內容
 <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是父元素傳過來的
 <h3>{{ word }}</h3>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  str: '',
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(newValue, oldValue) {
  //每當str的值改變則發送事件update:word , 并且把值傳過去
  this.$emit('update:word', newValue)
 }
 }
}
</script>
<style scoped></style>

利用了父級可以在子元素上監聽子元素的事件

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">
 <h3>{{ word }}</h3>
 </div>
</template>
<script>
export default {
 name: 'box',
 data() {
 return {
  num: 0
 }
 },
 props: {
 word: ''
 },
 watch: {
 str: function(neww, old) {
  //往父級發射incre事件
  this.$emit('incre', ++this.num)
 }
 },
}
</script>
<style scoped></style>

總結

以上所述是小編給大家介紹的vue .sync修飾符的使用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

石景山区| 金平| 旺苍县| 宣武区| 台南市| 永胜县| 怀集县| 钟祥市| 封丘县| 金秀| 来凤县| 砀山县| 涿鹿县| 大兴区| 津市市| 海丰县| 陇川县| 青海省| 章丘市| 同德县| 镇安县| 时尚| 隆林| 锡林浩特市| 会同县| 洞口县| 慈利县| 义乌市| 贵港市| 湘阴县| 寿宁县| 黑龙江省| 奈曼旗| 丁青县| 天峻县| 潮安县| 密山市| 中西区| 宣城市| 三河市| 浏阳市|