通訊方法：1、子元件設定props屬性，定義接收父元件傳遞過來的參數；而元件在使用子元件標籤中透過字面量來傳遞值。 2、子元件透過$emit觸發自訂事件進行通訊。 3.利用ref進行通信。 4.利用EventBus進行通訊。 5.利用$parent或$root進行通訊。 6.利用$attrs與$listeners進行通訊。 7.利用provide與inject進行通信。 8.利用vuex。
本教學操作環境：windows7系統、vue3版，DELL G3電腦。
都知道元件是vue最強大的功能之一，vue中每一個.vue我們都可以視之為一個元件通訊指的是發送者透過某種媒體以某種格式來傳遞訊息到收信者以達到某個目的。廣義上，任何資訊的交通都是通訊元件間通訊即指元件(.vue)透過某種方式來傳遞訊息以達到某個目的舉個栗子我們在使用UI框架中的table元件，可能會往table元件中傳入某些數據，這個本質就形成了組件之間的通訊。
在古代，人們透過驛站、飛鴿傳書、烽火警報、符號、語言、眼神、觸碰等方式進行資訊傳遞，到了今天，隨著科技水平的飛速發展，通信基本上完全利用有線或無線電完成，相繼出現了有線電話、固定電話、無線電話、手機、互聯網甚至視頻電話等各種通信方式從上面這段話，我們可以看到通訊的本質是資訊同步，共享回到vue中，每個元件之間的都有獨自的作用域，組件間的資料是無法共享的但實際開發工作中我們常常需要讓組件之間共享數據，這也是組件通訊的目的要讓它們互相之間能進行通訊，這樣才能構成一個有機的完整系統
##都#Provide 與Inject
Vuex
props傳遞資料
適用場景：父元件傳遞資料給子元件
父元件在使用子元件標籤中透過字面量傳遞值
##Children.vue
props:{
// 字符串形式
name:String // 接收的类型参数
// 对象形式
age:{
type:Number, // 接收的类型为数值
defaule:18, // 默认值为18
require:true // age属性必须传递
}
}<Children name="jack" age=18 />
子元件透過$emit觸發自訂事件，$emit第二個參數為傳遞的數值
this.$emit('add', good)
##
<Children @add="cartAdd($event)" />
ref來取得資料
父元件<Children ref="foo" /> this.$refs.foo // 获取子组件实例，通过子组件实例我们就能拿到对应的数据
// 创建一个中央时间总线类
class Bus {
constructor() {
this.callbacks = {}; // 存放事件的名字
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[name].push(fn);
}
$emit(name, args) {
if (this.callbacks[name]) {
this.callbacks[name].forEach((cb) => cb(args));
}
}
}
// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能this.$bus.$emit('foo')
this.$bus.$on('foo', this.handle)
this.$parent.on('add',this.add)
this.$parent.emit('add')
包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
可以通过 v-bind="$attrs" 传⼊内部组件
// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// Grandson使⽤
<div @click="$emit('some-event', 'msg from grandson')">
{{msg}}
</div>provide 与 inject
在祖先组件定义provide属性，返回传递的值
在后代组件通过inject接收组件传递过来的值
祖先组件
provide(){
return {
foo:'foo'
}
}后代组件
inject:['foo'] // 获取到祖先组件传递过来的值
vuex
适用场景: 复杂关系的组件数据传递
Vuex作用相当于一个用来存储共享变量的容器
state用来存放共享变量的地方
getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
mutations用来存放修改state的方法。
actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作
父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
复杂关系的组件数据传递可以通过vuex存放共享的变量
以上是vue的通訊方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
