vue的官網介紹很是不錯,先通讀一遍。javascript
2.3.0+ 新增vue
在有些狀況下,咱們可能須要對一個 prop 進行「雙向綁定」。不幸的是,真正的雙向綁定會帶來維護上的問題,由於子組件能夠修改父組件,且在父組件和子組件都沒有明顯的改動來源。java
這也是爲何咱們推薦以 update:my-prop-name
的模式觸發事件取而代之。舉個例子,在一個包含 title
prop 的假設的組件中,咱們能夠用如下方法表達對其賦新值的意圖:web
this.$emit('update:title', newTitle) |
而後父組件能夠監聽那個事件並根據須要更新一個本地的數據屬性。例如:app
<text-document |
爲了方便起見,咱們爲這種模式提供一個縮寫,即 .sync
修飾符:this
<text-document v-bind:title.sync="doc.title"></text-document> |
當咱們用一個對象同時設置多個 prop 的時候,也能夠將這個 .sync
修飾符和 v-bind
配合使用:spa
<text-document v-bind.sync="doc"></text-document> |
這樣會把 doc
對象中的每個屬性 (如 title
) 都做爲一個獨立的 prop 傳進去,而後各自添加用於更新的 v-on
監聽器。雙向綁定
如下爲代碼實例code
father.vuecomponent
<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是父元素傳過來的 <h2>{{ word }}</h2> </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"> <h2>{{ word }}</h2> </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"> <h2>{{ word }}</h2> </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"> <h2>{{ word }}</h2> </div> </template> <script> export default { name: 'box', props: { word: '' }, watch: { str: function(newword) { //往父級發射incre事件 this.$emit('update:word', newword) } }, } </script>
父組件中的子組件,少寫了一個自定義事件屬性,子組件中$emit直接出發父組件中數據的更新,清新明瞭。使用中須要注意的是,update和後面對應的數據名不能寫錯。
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是父元素傳過來的 <h2>{{ word }}</h2> </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>
<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) { //往父級發射incre事件 this.$emit('incre', ++this.num) } }, } </script> <style scoped></style>