關于Vue組件間的常用傳參方式
更新時間：2022年09月06日 09:20:11 作者：Tangctt
這篇文章主要介紹了關于Vue組件間的常用傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
組件間常用傳參方式
1. props、emit（最常用的父子通訊方式）
父傳子
父組件傳入屬性，子組件通過props接收，就可以在內部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ā)事件時再調用。定義一個類去處理事件，并掛載到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ù)據會丟失）
創(chuàng)建全局唯一的狀態(tài)管理倉庫store,有同步mutations、異步actions的方式去管理數(shù)據，有緩存數(shù)據getters，還能分成各個模塊modules易于維護，詳細使用見Vuex官方文檔
vue組件傳參記錄
幾個不太常用的組件傳值方法記載
在vue項目中，父子組件間的通訊很方便。但兄弟組件或多層嵌套組件間的通訊，就會比較麻煩。
parent / children 傳參調用方法
vue中打印this可以看到,parent / children 通過這兩個方法就可以實現(xiàn)組件傳參和調用各自的方法了
eventBus這個自己安裝下
通過main.js頁面的全局拋出然后再 通過$emit定義傳參修改 $on的方式監(jiān)聽變動 $off的方式銷毀
provide/inject
父組件注入 子組件拋出給data 在Vue 3中，使用provide/inject，需要先創(chuàng)建一個Symbol類型的token
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解Vue2.5+遷移至Typescript指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了vue中的keep-alive內置組件緩存，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
如今的Vue3已經勢不可擋,當然搭建一個全新的Vue3項目也有了全新的方式,下面這篇文章主要給大家介紹了關于如何手把手教你創(chuàng)建vue3項目的最佳方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue2.0 實現(xiàn)富文本編輯器功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
最近遇見一個需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關于前端大文件上傳與下載(分片上傳)的詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Vue3+Antd實現(xiàn)彈框顯示內容并加入復制按鈕
這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內容并加入復制按鈕,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
vue3.0基于views批量實現(xiàn)動態(tài)路由的方法(示例代碼)
以前vue項目中也有很多實現(xiàn)動態(tài)路由的方法,比如有一些項目涉及權限的可能會使用api請求路由數(shù)據在來createRouter,或者本地構建使用routes.push來動態(tài)構建路由, 今天介紹一種新的方式來基于某個文件夾批量構建動態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了vue-drag-chart 拖動/縮放的圖表組件的實例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要為大家介紹了vue項目如何使用mock，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11