關(guān)于Vue組件間的常用傳參方式
組件間常用傳參方式
1. props、emit（最常用的父子通訊方式）
父?jìng)髯?/strong>
父組件傳入屬性，子組件通過(guò)props接收，就可以在內(nèi)部this.XXX的方式使用
// 父組件
<hello-world msg="hello world!"><hello-world>
// 子組件
<div>{{msg}}</div>
props：['msg']子傳父
子組件$emit（事件名，傳遞的參數(shù)）向外彈出一個(gè)自定義事件，在父組件中監(jiān)聽子組件的自定義事件，同時(shí)也能獲取子組件傳出來(lái)的參數(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（常用任意兩個(gè)組件之間的通訊）
原理：注冊(cè)的事件存起來(lái)，等觸發(fā)事件時(shí)再調(diào)用。定義一個(gè)類去處理事件，并掛載到Vue實(shí)例的this上即可注冊(cè)和觸發(fā)事件，也可拓展一些事件管理
class Bus {
? constructor () {
? ? this.callbackList = {}
? }
? $on (name, callback) {
? ? // 注冊(cè)事件
? ? 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()
// 任意兩個(gè)組件中
// 組件一：在組件的 mounted() 去注冊(cè)事件
this.$bus.$on('confirm', handleConfirm)
// 組件二：觸發(fā)事件(如：點(diǎn)擊事件后執(zhí)行觸發(fā)事件即可)
this.$bus.$emit('confirm', list)3.Vuex狀態(tài)管理
（vue的核心插件，用于任意組件的任意通訊，需注意刷新后有可能vuex數(shù)據(jù)會(huì)丟失）
創(chuàng)建全局唯一的狀態(tài)管理倉(cāng)庫(kù)store,有同步mutations、異步actions的方式去管理數(shù)據(jù)，有緩存數(shù)據(jù)getters，還能分成各個(gè)模塊modules易于維護(hù)，詳細(xì)使用見Vuex官方文檔
vue組件傳參記錄
幾個(gè)不太常用的組件傳值方法記載
在vue項(xiàng)目中，父子組件間的通訊很方便。但兄弟組件或多層嵌套組件間的通訊，就會(huì)比較麻煩。
parent / children 傳參調(diào)用方法
vue中打印this可以看到,parent / children 通過(guò)這兩個(gè)方法就可以實(shí)現(xiàn)組件傳參和調(diào)用各自的方法了
eventBus這個(gè)自己安裝下
通過(guò)main.js頁(yè)面的全局拋出然后再 通過(guò)$emit定義傳參修改 $on的方式監(jiān)聽變動(dòng) $off的方式銷毀
provide/inject
父組件注入 子組件拋出給data 在Vue 3中，使用provide/inject，需要先創(chuàng)建一個(gè)Symbol類型的token
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解Vue2.5+遷移至Typescript指南，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式
如今的Vue3已經(jīng)勢(shì)不可擋,當(dāng)然搭建一個(gè)全新的Vue3項(xiàng)目也有了全新的方式,下面這篇文章主要給大家介紹了關(guān)于如何手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue2.0 實(shí)現(xiàn)富文本編輯器功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
前端大文件上傳與下載(分片上傳)的詳細(xì)過(guò)程
最近遇見一個(gè)需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細(xì)過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
本文主要介紹了Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實(shí)現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)
以前vue項(xiàng)目中也有很多實(shí)現(xiàn)動(dòng)態(tài)路由的方法,比如有一些項(xiàng)目涉及權(quán)限的可能會(huì)使用api請(qǐng)求路由數(shù)據(jù)在來(lái)createRouter,或者本地構(gòu)建使用routes.push來(lái)動(dòng)態(tài)構(gòu)建路由, 今天介紹一種新的方式來(lái)基于某個(gè)文件夾批量構(gòu)建動(dòng)態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12
vue-drag-chart 拖動(dòng)/縮放圖表組件的實(shí)例代碼
這篇文章主要介紹了vue-drag-chart 拖動(dòng)/縮放的圖表組件的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
這篇文章主要為大家介紹了vue項(xiàng)目如何使用mock，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11