vue.js 組件之間傳遞資料

標籤：

組件是 vue.js  最強大的功能之一，而組件執行個體的範圍是相互獨立的，這就意味著不同組件之間的資料無法相互引用。如何傳遞資料也成了組件的重要知識點之一。本文就這個知識點和大家一起來扒一扒，希望對大家 學習vue.js有所協助。 組件組件與組件之間，還存在著不同的關係。父子關係與兄弟關係（不是父子的都暫稱為兄弟吧）。 父子組件父子關係即是組件 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子組件想要使用父組件的資料，我們需要通過子組件的 props  選項來獲得父組件傳過來的資料。以下我使用在  .vue  檔案中的格式來寫例子。 如何傳遞資料在父組件 father.vue  中引用子組件  child.vue ，把  name  的值傳給  child  組件。在子組件 child.vue  中的  props  選項中聲明它期待獲得的資料那麼頁面中就會渲染出：Hello linxin 單向資料流當父組件的 name  發生改變，子組件也會自動地更新視圖。但是在子組件中，我們不要去修改  prop 。如果你必須要修改到這些資料，你可以使用以下方法：方法一：把 prop  賦值給一個局部變數，然後需要修改的話就修改這個局部變數，而不影響  propexport  default { data(){ return {newMessage: null}},props: [’message’],created(){ this.newMessage =  this.message;}}方法二：在計算屬性中對 prop  進行處理 export  default { props: [’message’],computed: {newMessage(){return this.newMessage + ’  哈哈哈 ’;}}} 自訂事件prop  是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。修改子組件的  prop 值，是不會傳回給父組件去更新視圖的。那麼子組件要如何去與父組件通訊呢？那就是自訂事件。通過在父組件 $on(eventName)  監聽自訂事件，當子組件裡  $emit(eventName) 觸發該自訂事件的時候，父組件執行相應的操作。比如在父組件中控制一個彈框子組件的顯示，在子組件中按下關閉之後，告訴父組件去隱藏它，然後父組件就執行操作隱藏彈框。在子組件 dialog.vue  中：這樣就實現了父子組件之間的相互連訊。 Vuex上面的例子都是建立在父子關係的組件上，但是對於其他層級的關係，實現起來就比較繁瑣了。那麼這時候 Vuex  就能更好的幫你在各個組件間即時通訊了。 總結組件通訊並不是一定要使用必須要使用 Vuex ，對於一些簡單的資料傳遞， prop  也可以完成。使用 prop  實現子組件的顯示與隱藏，使用  vuex  來實現組件間的資料狀態管理。來源： 極客頭條

vue.js 組件之間傳遞資料