歡迎加入QQ討論群258996829
麥子學院 頭像
蘋果6袋
6
麥子學院

vue.js 組件之間是如何傳遞數(shù)據(jù)的？

發(fā)布時間：2017-08-24 11:32  回復(fù):0  查看:3089   最后回復(fù)：2017-08-24 11:32  
組件是 vue.js  最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。如何傳遞數(shù)據(jù)也成了組件的重要知識點之一。本文就這個知識點和大家一起來扒一扒，希望對大家 學習vue.js有所幫助。
　　 組件
　　組件與組件之間，還存在著不同的關(guān)系。父子關(guān)系與兄弟關(guān)系（不是父子的都暫稱為兄弟吧）。
　　 父子組件
　　父子關(guān)系即是組件 A  在它的模板中使用了組件  B ，那么組件  A  就是父組件，組件  B  就是子組件。
　　//  注冊一個子組件 Vue.component('child', {
　　 data: function(){
　　return {
　　 text: ' 我是 father 的子組件！ '
　　}
　　},
　　 template: '{{ text }}'
　　})//  注冊一個父組件 Vue.component('father', {
　　 template: '
　　' //  在模板中使用了 child 組件  })
　　直接使用 father  組件的時候：
　　頁面中就會渲染出  ：我是father 的子組件！
　　father  組件在模板中使用了  child  組件，所以它就是父組件， child  組件被使用，所以  child  組件就是子組件。
　　 兄弟組件
　　兩個組件互不引用，則為兄弟組件。
　　 Vue.component('brother1', {
　　 template: '
　　我是大哥
　　' }) Vue.component('brother2', { template: '
　　我是小弟
　　' })
　　使用組件的時候：
　　頁面中就會渲染出  ：
　　我是大哥
　　我是小弟
　　 Prop
　　子組件想要使用父組件的數(shù)據(jù)，我們需要通過子組件的 props  選項來獲得父組件傳過來的數(shù)據(jù)。以下我使用在  .vue  文件中的格式來寫例子。
　　 如何傳遞數(shù)據(jù)
　　在父組件 father.vue  中引用子組件  child.vue ，把  name  的值傳給  child  組件。
　　在子組件 child.vue  中的  props  選項中聲明它期待獲得的數(shù)據(jù)
　　那么頁面中就會渲染出：Hello linxin
　　 單向數(shù)據(jù)流
　　當父組件的 name  發(fā)生改變，子組件也會自動地更新視圖。但是在子組件中，我們不要去修改  prop 。如果你必須要修改到這些數(shù)據(jù)，你可以使用以下方法：
　　方法一：把 prop  賦值給一個局部變量，然后需要修改的話就修改這個局部變量，而不影響  prop
　　export  default {
　　 data(){
　　 return {
　　newMessage: null
　　}
　　},
　　props: ['message'],
　　created(){
　　 this.newMessage =  this.message;
　　}
　　}
　　方法二：在計算屬性中對 prop  進行處理
　　 export  default {
　　 props: ['message'],
　　computed: {
　　newMessage(){
　　return this.newMessage + '  哈哈哈 ';
　　}
　　}
　　}
　　 自定義事件
　　prop  是單向綁定的：當父組件的屬性變化時，將傳導(dǎo)給子組件，但是不會反過來。修改子組件的  prop  值，是不會傳回給父組件去更新視圖的。那么子組件要如何去與父組件通訊呢？
　　那就是自定義事件。通過在父組件 $on(eventName)  監(jiān)聽自定義事件，當子組件里  $emit(eventName)  觸發(fā)該自定義事件的時候，父組件執(zhí)行相應(yīng)的操作。
　　比如在父組件中控制一個彈框子組件的顯示，在子組件中按下關(guān)閉之后，告訴父組件去隱藏它，然后父組件就執(zhí)行操作隱藏彈框。
　　在子組件 dialog.vue  中：
　　這樣就實現(xiàn)了父子組件之間的相互通訊。
　　 Vuex
上面的例子都是建立在父子關(guān)系的組件上，但是對于其他層級的關(guān)系，實現(xiàn)起來就比較繁瑣了。那么這時候 Vuex  就能更好的幫你在各個組件間實時通訊了。
　　 總結(jié)
　　組件通訊并不是一定要使用必須要使用 Vuex ，對于一些簡單的數(shù)據(jù)傳遞， prop  也可以完成。使用  prop  實現(xiàn)子組件的顯示與隱藏，使用  vuex  來實現(xiàn)組件間的數(shù)據(jù)狀態(tài)管理。
來源： 極客頭條
您還未登錄，請先登錄

熱門帖子

最新帖子

?