如何在vue.js元件之間進行資料傳遞

前言

元件是 vue.js 最強大的功能之一，而元件實例的作用域是相互獨立的，這意味著不同元件之間的資料無法相互引用。如何傳遞資料也成了元件的重要知識點之一。

元件

元件與元件之間，也存在著不同的關係。父子關係與兄弟關係（不是父子的都暫稱為兄弟吧）。

原文作者：林鑫，作者部落格：

父子元件

父子關係就是元件A 在它的範本中使用了元件B，那麼元件A 就是父組件，組件B 就是子組件。

// 注册一个子组件Vue.component('child', {data: function(){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 賦值給一個局部變量，然後需要修改的話就修改這個局部變量，而不影響prop

export default {data(){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，可查看我的另一篇文章：Vuex 模組化實作待辦事項的狀態管理

總結

元件通訊並不是一定要使用必須使用Vuex，對於一些簡單的資料傳遞，prop 也可以完成。本文主要是對元件傳參的一些基礎知識點的記錄，實戰可以參考 notepad 這個例子，使用 prop 實作子元件的顯示與隱藏，使用 vuex 來實現元件間的資料狀態管理。

以上是如何在vue.js元件之間進行資料傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章！