首頁 > 文章 > web前端 > vue的通訊方法有哪些

vue的通訊方法有哪些

青灯夜游原創: 2022-12-21 20:05:297491瀏覽

通訊方法：1、子元件設定props屬性，定義接收父元件傳遞過來的參數；而元件在使用子元件標籤中透過字面量來傳遞值。 2、子元件透過$emit觸發自訂事件進行通訊。 3.利用ref進行通信。 4.利用EventBus進行通訊。 5.利用$parent或$root進行通訊。 6.利用$attrs與$listeners進行通訊。 7.利用provide與inject進行通信。 8.利用vuex。

vue的通訊方法有哪些

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

都知道元件是vue最強大的功能之一，vue中每一個.vue我們都可以視之為一個元件通訊指的是發送者透過某種媒體以某種格式來傳遞訊息到收信者以達到某個目的。廣義上，任何資訊的交通都是通訊元件間通訊即指元件(.vue)透過某種方式來傳遞訊息以達到某個目的舉個栗子我們在使用UI框架中的table元件，可能會往table元件中傳入某些數據，這個本質就形成了組件之間的通訊。

一、組件間通信解決了什麼

在古代，人們透過驛站、飛鴿傳書、烽火警報、符號、語言、眼神、觸碰等方式進行資訊傳遞，到了今天，隨著科技水平的飛速發展，通信基本上完全利用有線或無線電完成，相繼出現了有線電話、固定電話、無線電話、手機、互聯網甚至視頻電話等各種通信方式從上面這段話，我們可以看到通訊的本質是資訊同步，共享回到vue中，每個元件之間的都有獨自的作用域，組件間的資料是無法共享的但實際開發工作中我們常常需要讓組件之間共享數據，這也是組件通訊的目的要讓它們互相之間能進行通訊，這樣才能構成一個有機的完整系統

##二、組件間通信的分類

元件間通訊的分類可以分成以下

父子元件之間的通訊

vue的通訊方法有哪些

三、組件間通訊的方案

##整理vue中8種常規的通訊方案

透過props 傳遞

透過$emit 觸發自訂事件
使用ref
EventBus
$parent 或$root
attrs 與listeners

vue的通訊方法有哪些

##都#Provide 與Inject

Vuex

props傳遞資料

適用場景：父元件傳遞資料給子元件

子元件設定props屬性，定義接收父元件傳遞過來的參數

父元件在使用子元件標籤中透過字面量傳遞值

##Children.vue

props:{  
    // 字符串形式  
 name:String // 接收的类型参数  
    // 对象形式  
    age:{    
        type:Number, // 接收的类型为数值  
        defaule:18,  // 默认值为18  
       require:true // age属性必须传递  
    }  
}

Father.vue

```
<Children name="jack" age=18 />
```
子元件透過$emit觸發自訂事件，$emit第二個參數為傳遞的數值

Chilfen.vue

this.$emit(&#39;add&#39;, good)

Father.vue

<Children @add="cartAdd($event)" />

#ref

父元件在使用子元件的時候設定

父元件透過設定子元件

ref來取得資料

父元件

<Children ref="foo" />  
  
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

EventBus

######使用場景：兄弟元件傳值############建立一個中央事件匯流排EventBus############兄弟元件透過$emit觸發自訂事件，$emit第二個參數為傳遞的數值############另一個兄弟元件透過$on監聽自訂事件############ Bus.js###

// 创建一个中央时间总线类  
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的功能

###Children1.vue###

this.$bus.$emit(&#39;foo&#39;)

###Children2.vue###

this.$bus.$on(&#39;foo&#39;, this.handle)

#########$parent 或$ root########## #########透過共同祖輩$parent或$root搭建通訊橋連#############兄弟元件###

this.$parent.on(&#39;add&#39;,this.add)

###另一個兄弟元件###

this.$parent.emit(&#39;add&#39;)

#########$attrs 與$ listeners###################適用場景：祖先傳遞資料給子孫########## ##設定批次向下傳屬性$attrs和$listeners###

包含了父级作用域中不作为 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(&#39;some-event&#39;, &#39;msg from grandson&#39;)">  
{{msg}}  
</div>

provide 与 inject

在祖先组件定义provide属性，返回传递的值
在后代组件通过inject接收组件传递过来的值

祖先组件

provide(){  
    return {  
        foo:&#39;foo&#39;  
    }  
}

后代组件

inject:[&#39;foo&#39;] // 获取到祖先组件传递过来的值

vuex

适用场景: 复杂关系的组件数据传递
Vuex作用相当于一个用来存储共享变量的容器

vue的通訊方法有哪些

state用来存放共享变量的地方
getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
mutations用来存放修改state的方法。
actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

小结

父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
复杂关系的组件数据传递可以通过vuex存放共享的变量

【相关推荐：vuejs视频教程、web前端开发】

以上是vue的通訊方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

class 作用域事件异步 table ui

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：vue初始化都做什麼下一篇：vue初始化都做什麼

看更多