通過上壹節的學習,我們了解到了在Vue的組件中數據傳遞: prop 向下傳遞,事件向上傳遞 。意思是父組件通過 prop 給子組件下發數據,子組件通過事件給父組件發送消息。但Vue中, props 是單向數據綁定,雖然在Vue 1.0版本中,通過 .sync 能實現雙向數據綁定。但 .sync 在幾個版本中被移除,盡管在2.3版本重新引入 .sync 修飾符,可這次引入只是作為壹個編譯時的語法糖存在。如果直接使用 .sync 修飾符來做雙向數據綁定,會報警告信息。那麽我們如何在組件中實現雙向數據綁定呢?這壹節我們就來學習這方面的相關知識。
實現組件雙向數據綁定
在上壹節中最後的示例使用的是Vue 1.0版本中的 .sync 實現數據雙向綁定。那我們先來看看拋棄 .sync 修飾符來實現組件雙向數據綁定的工作: 通過Vue提供的機制,繞開直接修改 prop 來實現組件雙向數據綁定 。
其思路大致是這樣:
在數據渲染時使用 prop 渲染數據
將 prop 綁定到子組件自身的數據上,修改數據時修改自身數據來替代 prop
watch 子組件自身數據的改變,觸發事件通知父組件更改綁定到 prop 的數據
這樣做的好處是: 父組件數據改變時,不會修改存儲 prop 的子組件數據,只是以子組件數據為媒介,完成對 prop 的雙向修改 。
繼續拿上壹節的示例來舉例,只不過接下來的示例,並沒有使用 .sync 來實現雙向數據綁定的效果。
修改的代碼如下:
<p id="app">
<p class="parent">
<h3>父組件Parent數據</h3>
<ul>
<li>
<label>姓名:</label>
<span>{{ name }}</span>
<input type="text" v-model="name" />
</li>
<li>
<label>年齡:</label>
<span>{{ age }}</span>
<input type="number" v-model="age" />
</li>
</ul>
</p>
<child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>
</p>
<template id="child">
<p class="child">
<h3>子組件child數據</h3>
<ul>
<li>
<label>姓名</label>
<span>{{ myName }}</span>
<input type="text" v-model="childMyName" />
</li>
<li>
<label>年齡</label>
<span>{{ myAge }}</span>
<input type="number" v-model="childMyAge" />
</li>
</ul>
</p>
</template>在上面的這個示例中,我們並沒有使用 .sync 修飾符,但在調用子組件的時候使用了 @update :
<child :my-name="name" :my-age="age" @update:my-name="val => name = val" @update:my-age="val => age = val"></child>子組件中渲染到HTML模板的數據是用的 prop 數據,但監聽 input 是使用的子組件自身定義的數據作為 v-model 。這樣壹來就不會直接修改 prop 。簡單來說, 壹切 prop 的改變從本質上來說都由父組件完成 。JavaScript的代碼如下:
let parent = new Vue({
el: '#app',
data () {
return {
name: 'w3cplus',
age: 7
}
},
components: {
'child': {
template: '#child',
props: ['myName', 'myAge'],
data () {
return {
childMyName: this.myName,
childMyAge: this.myAge
}
},
watch: {
childMyName: function (val) {
this.$emit('update:my-name', val)
},
childMyAge: function (val) {
this.$emit('update:my-age', val)
}
}
}
}
})最終效果如下:
上面的示例效果,不管是修改父組件的數據還是子組件的數據,都會相互影響:
因為子組件中 props 的 myName 和 myAge 不可寫,所以在 data 中創建壹個副本 childMyName 和 childMyAge 。初始值為 props 屬性 myName 和 myAge 的值,同時在組件內所有需要調用 props 的地方調用 data 中的 childMyName 和 childMyAge 。
components: {
'child': {
template: '#child',
props: ['myName', 'myAge'],
data () {
return {
childMyName: this.myName,
childMyAge: this.myAge
}
},
...
}
}接下來在子組件中通過 watch 來對 props 屬性的 myName 和 myAge 進行監聽。當 props 修改後對應 data 中的副本 childMyName 和 childMyAge 也要同步數據。
...
watch: {
childMyName: function (val) {
this.$emit('update:my-name', val)
},
childMyAge: function (val) {
this.$emit('update:my-age', val)
}
}
...接下來要做的事情就是當組件內的 props 屬性發生變化時,需要向組件外(父組件)發送通知,通知組件內屬性變更,然後由外層(父組件)自己來決定是否變更他的數據。
接下來我們按上面的方案來改造上壹節示例中的switch按鈕。
至此,實現了組件內部數據與組件外部的數據的雙向綁定,組件內外數據的同步。簡而言之: 組件內部自已變了告訴外部,外部決定要不要變更 。
什麽樣的 props 適合做雙向綁定
事實上,在Vue中,雙向綁定的 props 是不利於組件間的數據狀態管理,尤其是較為復雜的業務當中,因此在實際項目中應該盡量少用雙向綁定,過於復雜的數據處理,建議使用 Vuex 。但很多時候又避免不了使用雙向綁定。那麽什麽場景之下使用 props 來做雙向綁定呢?
如果在妳的項目中,同時滿足下面的條件時,我們就可以考慮使用 props 來做雙向綁定:
組件內部需要修改 props
組件需要可以由外部在運行時動態控制,而非單純的初始化
組件父部需要讀取組件內的狀態來進行處理
雖然上面的示例展示了我們怎麽在Vue 2.0中實現 props 的雙向綁定,但如果項目中有更多這樣的雙向綁定,那麽就會讓妳做壹些重復的事情,而且代碼也很冗余,事情也會變得復雜。為了改變這樣的現象,可以借助Vue的 mixin 來自動化處理 props 的雙向綁定的需求。不過在這節中,我們不會學習這方面的知識,後面我們在學習 mixin 時,可地再回過頭來實現這樣的功能。
在Vue中除了上述介紹的組件通訊之外,還有其他壹些方法,在下壹節中,咱們將會繼續學習這方面的知識。
相信看了本文案例妳已經掌握了方法,更多精彩請關註Gxl網其它相關文章!
推薦閱讀:
v-for索引index在html中的使用
vue+webpack打包路徑有哪些問題