vue組件傳值的方式?一、父子組件之間的傳值----props/$emit，現在小編就來說說關于vue組件傳值的方式?下面内容希望能幫助到你，我們來一起看看吧!

vue組件傳值的方式

一、父子組件之間的傳值----props/$emit

• 1、父組件向子組件傳值--props
• 2.子組件想父組件傳值-this.$emit('select',item)

二、父組件向下（深層）子組件傳值----provide/inject

provide：Object | () => Object inject：Array<string> | { [key: string]: string | Symbol | Object }

// 父級組件提供 'foo' var Provider = { provide: { foo: 'bar' }, // ... } // 子組件注入 'foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... }

三、訪問父、子組件----ref、$parent/$child

1、ref--在父組件中訪問子組件

this.$refs.usernameInput

2、父、子組件之間的訪問

子實例可以用 this.$parent 訪問父實例，子實例被推入父實例的 $children 數組中

四，EventBus

在vue項目中，父子組件間的通訊很方便。但兄弟組件或多層嵌套組件間的通訊，就會比較麻煩。這時，使用eventBus通訊，就可以很便捷的解決這個問題。

1、初始化——全局定義 全局定義，可以将eventBus綁定到vue實例的原型上,也可以直接綁定到window對象上. //main.js //方式一 Vue.prototype.$EventBus = new Vue(); //方式二 window.eventBus = new Vue(); 2、觸發事件 //使用方式一定義時 this.$EventBus.$emit('eventName', param1,param2,...) //使用方式二定義時 EventBus.$emit('eventName', param1,param2,...) 3、監聽事件 //使用方式一定義時 this.$EventBus.$on('eventName', (param1,param2,...)=>{ //需要執行的代碼 }) //使用方式二定義時 EventBus.$on('eventName', (param1,param2,...)=>{ //需要執行的代碼 }) 4、移除監聽事件 為了避免在監聽時，事件被反複觸發，通常需要在頁面銷毀時移除事件監聽。或者在開發過程中，由于熱更新，事件可能會被多次綁定監聽，這時也需要移除事件監聽。 //使用方式一定義時 this.$EventBus.$off('eventName');

五、Vuex當項目遇到以下兩種場景時

多個組件依賴于同一狀态時。

來自不同組件的行為需要變更同一狀态。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!