關于Vue組件間的常用傳參方式

更新時間：2022年09月06日 09:20:11 作者：Tangctt

這篇文章主要介紹了關于Vue組件間的常用傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

組件間常用傳參方式

1. props、emit（最常用的父子通訊方式）

父傳子

父組件傳入屬性，子組件通過props接收，就可以在內(nèi)部this.XXX的方式使用

// 父組件
<hello-world msg="hello world!"><hello-world>

// 子組件
<div>{{msg}}</div>

props：['msg']

子傳父

子組件$emit（事件名，傳遞的參數(shù)）向外彈出一個自定義事件，在父組件中監(jiān)聽子組件的自定義事件，同時也能獲取子組件傳出來的參數(shù)

//?? ?子組件
<input v-model="username" @change="setUser">

return {
? ? username:'tct'
}

methods：{
? ?? ?setUser(){
? ?? ??? ?this.$emit('transferUser', username)
? ?? ?}
}

//?? ?父組件
<hello-world @transferUser="getUser"><hello-world>

return {
? ? user:''
}

methods：{
? ?? ?getUser(msg){
? ?? ??? ?this.user = msg
? ?? ?}
}

2. 事件總線EventBus（常用任意兩個組件之間的通訊）

原理：注冊的事件存起來，等觸發(fā)事件時再調(diào)用。定義一個類去處理事件，并掛載到Vue實例的this上即可注冊和觸發(fā)事件，也可拓展一些事件管理

class Bus {
? constructor () {
? ? this.callbackList = {}
? }

? $on (name, callback) {
? ? // 注冊事件
? ? this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
? }

? $emit (name, args) {
? ? // 觸發(fā)事件
? ? if (this.callbackList[name]) {
? ? ? this.callbackList[name].forEach(cb => cb(args))
? ? }
? }
}

Vue.prototype.$bus = new Bus()

// 任意兩個組件中
// 組件一：在組件的 mounted() 去注冊事件
this.$bus.$on('confirm', handleConfirm)

// 組件二：觸發(fā)事件(如：點擊事件后執(zhí)行觸發(fā)事件即可)
this.$bus.$emit('confirm', list)

3.Vuex狀態(tài)管理

（vue的核心插件，用于任意組件的任意通訊，需注意刷新后有可能vuex數(shù)據(jù)會丟失）

創(chuàng)建全局唯一的狀態(tài)管理倉庫store,有同步mutations、異步actions的方式去管理數(shù)據(jù)，有緩存數(shù)據(jù)getters，還能分成各個模塊modules易于維護，詳細使用見Vuex官方文檔

vue組件傳參記錄

幾個不太常用的組件傳值方法記載

在vue項目中，父子組件間的通訊很方便。但兄弟組件或多層嵌套組件間的通訊，就會比較麻煩。

parent / children 傳參調(diào)用方法

vue中打印this可以看到,parent / children 通過這兩個方法就可以實現(xiàn)組件傳參和調(diào)用各自的方法了

eventBus這個自己安裝下

通過main.js頁面的全局拋出然后再通過$emit定義傳參修改 $on的方式監(jiān)聽變動 $off的方式銷毀

provide/inject

父組件注入子組件拋出給data 在Vue 3中，使用provide/inject，需要先創(chuàng)建一個Symbol類型的token

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

詳解Vue2.5+遷移至Typescript指南
這篇文章主要介紹了詳解Vue2.5+遷移至Typescript指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-08-08
vue中keep-alive內(nèi)置組件緩存的實例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
手把手教你創(chuàng)建vue3項目的最佳方式
如今的Vue3已經(jīng)勢不可擋,當然搭建一個全新的Vue3項目也有了全新的方式,下面這篇文章主要給大家介紹了關于如何手把手教你創(chuàng)建vue3項目的最佳方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-11-11
vue2.0 實現(xiàn)富文本編輯器功能
這篇文章主要介紹了vue2.0 實現(xiàn)富文本編輯器功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-05-05
前端大文件上傳與下載(分片上傳)的詳細過程
最近遇見一個需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關于前端大文件上傳與下載(分片上傳)的詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-11-11
Vue實現(xiàn)Echarts圖表寬高自適應的實踐
本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復制按鈕
這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復制按鈕,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12
vue3.0基于views批量實現(xiàn)動態(tài)路由的方法(示例代碼)
以前vue項目中也有很多實現(xiàn)動態(tài)路由的方法,比如有一些項目涉及權限的可能會使用api請求路由數(shù)據(jù)在來createRouter,或者本地構建使用routes.push來動態(tài)構建路由, 今天介紹一種新的方式來基于某個文件夾批量構建動態(tài)路由的方法,感興趣的朋友一起看看吧
2024-12-12
vue-drag-chart 拖動/縮放圖表組件的實例代碼
這篇文章主要介紹了vue-drag-chart 拖動/縮放的圖表組件的實例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04
vue項目中如何使用mock你知道嗎
這篇文章主要為大家介紹了vue項目如何使用mock，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11