Vue3 和Vue2的元件通訊方式，建議收藏

大佬鎮樓

先來看看Vue3的幾種元件通訊方式：

props

$emit

expose / ref

$attrs

v-model

provide / inject

Vuex

下面分別介紹這幾種方式的寫法：

1、props

父元件子元件

2、$emit

子元件父元件

3、expose / ref

父元件子元件

4、attrs

子元件父元件

5、v-model

父元件（v-model可省略）子元件

6. provide / inject

父元件子元件

接下來是Vue2.x 元件通訊使用方法：

1、 props

父元件子元件export default { props：{ msg：{ type：String， default：‘這是預設資料’ } }， mounted（）{ console。log（this。msg） }

2、.sync

父元件

3、v-model

父元件

4、ref

子元件export default { data（）{ return { name：“” } }， methods：{ someMethod（msg）{ console。log（msg） } }}父元件

5、$emit / v-on

子元件export default { data（）{ return { msg： “這是發給父元件的資訊” } }， methods： { handleClick（）{ this。$emit（“sendMsg”，this。msg） } }，}父元件export default { methods：{ getChildMsg（msg）{ console。log（msg） // 這是父元件接收到的訊息 } }}

6、children/parent

父元件export default{ mounted（）{ this。$children［0］。someMethod（） // 呼叫第一個子元件的方法 this。$children［0］。name // 獲取第一個子元件中的屬性 }}子元件export default{ mounted（）{ this。$parent。someMethod（） // 呼叫父元件的方法 this。$parent。name // 獲取父元件中的屬性 }}

7、EventBus

// 方法一// 抽離成一個單獨的 js 檔案 EventBus。js ，然後在需要的地方引入// EventBus。jsimport Vue from “vue”export default new Vue（）// 方法二直接掛載到全域性// main。jsimport Vue from “vue”Vue。prototype。$bus = new Vue（）

8、Vuex

（這個就不舉例子了……。。懂的都懂！）

創作不易，你的關注就是我前進的動力！［奮鬥］［奮鬥］