vue組件間傳值的方法你知道幾種
一丶父子組件傳值
先在父組件中給子組件的自定義屬性綁定一個(gè) 父組件的變量
<template class="father"> <child :自定義屬性名="父組件的變量"></child> <template >
在子組件的props屬性中可以取出父組件給的值，props中的變量用法和data中變量用法完全一樣，只不過值的來源不同
export default {
name: "child",
props: ["自定義屬性名"],
data() {}
}
二丶子父組件傳值
先在父組件中給子組件的 自定義屬性 綁定一個(gè)父組件的函數(shù)
<template class="father">
<child @自定義事件="父的處理函數(shù)">
<template >
export default {
name: "father",
data() {}
methods:{
父的處理函數(shù)(參數(shù)){
//參數(shù)：得到子組件觸發(fā)事件($emit)時(shí)，傳遞過來的數(shù)據(jù)
}
}
})
在子組件中 this.$emit(“父的處理函數(shù)”,this.數(shù)據(jù)) 觸發(fā)父組件中的函數(shù)進(jìn)行傳參
三丶兄弟組件傳值
事件總線:
就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件
創(chuàng)建全局空Vue實(shí)例：eventBus
import Vue from 'vue'; const eventBus= new Vue() //創(chuàng)建事件總線 export default eventBus;
具體頁面使用$emit發(fā)布事件 - 傳遞值
import eventBus from '@u/eventBus'
eventBus.$emit('send',‘hello')
具體頁面使用$on訂閱事件 - 接收組件值
import eventBus from '@u/eventBus'
eventBus.$on('send', msg => {
console.log(msg) //控制臺(tái)輸出 hello
}
注意：$on先進(jìn)行監(jiān)聽，一旦$emit發(fā)布事件后所有組件都可以$on監(jiān)聽到事件。所以傳遞參數(shù)的時(shí)候一定已經(jīng)先進(jìn)行了監(jiān)聽才能得到參數(shù)。比如在父組件中$emit事件放在mounted鉤子函數(shù)中，等待子組件創(chuàng)建并$on開始監(jiān)聽事件后再去觸發(fā)$emit發(fā)布事件。
$off()移除事件監(jiān)聽
import eventBus from '@u/eventBus'
eventBus.$off('send')
事件訂閱功能$on是$eventBus對(duì)象完成的，與組件無關(guān)，如果用v-if銷毀子組件的時(shí)候，會(huì)形成閉包，造成內(nèi)存泄露，所有要在銷毀組件的時(shí)候進(jìn)行取消監(jiān)聽事件
具體形成原因點(diǎn)擊查看
四丶$parent /$children與ref
$parent方法是在子組件中可以直接訪問該組件的父實(shí)例或組件。
在父組件中定義一個(gè)切換顯示頁面執(zhí)行中的顯示方法。
switchLoadPage(msg) {
if(!this.loading && msg)
this.loadtext=msg;
this.loading = !this.loading;
},
? 在子組件中直接通過$parent去調(diào)用該方法
this.$parent.switchLoadPage();
$children方法是在父組件中可以直接訪問子組件的實(shí)例，但是不保證子組件的順序。
ref 被用來給DOM元素或子組件注冊(cè)引用信息。引用信息會(huì)根據(jù)父組件的 $refs 對(duì)象進(jìn)行注冊(cè)。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子組件上，引用信息就是組件實(shí)例。
在父組件中自定義一個(gè)表格組件，給子組件加上 ref屬性
<result ref="result" :config="dgConfig" ></result>
在父組件中就可以通過this.$refs.result去找到result子組件進(jìn)行操作,比如把父組件的sdata直接放入子組件中
methods: {
info(){
this.$refs.result.sdata = this.sdata;
},
}
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
關(guān)于Ant-Design-Vue快速上手指南+排坑
這篇文章主要介紹了關(guān)于Ant-Design-Vue快速上手指南+排坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue實(shí)現(xiàn)打印功能的兩種方法,文中通過兩種方法給大家介紹了指定不打印區(qū)域的解決方法，需要的朋友可以參考下2018-09-09
vue項(xiàng)目代碼格式規(guī)范設(shè)置參考指南
這篇文章主要給大家介紹了關(guān)于vue3簡(jiǎn)單封裝input組件和統(tǒng)一表單數(shù)據(jù)的相關(guān)資料,不管你學(xué)習(xí)哪一門編程語言,相信大家都會(huì)略化這一部分,需要的朋友可以參考下2022-05-05
作為一名剛?cè)腴T計(jì)算機(jī)語言的人來說,要想快速完成測(cè)試開發(fā)地圖項(xiàng)目,肯定要接用到SuperMap，本文主要介紹了Vue 使用超圖SuperMap的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue實(shí)現(xiàn)二級(jí)導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)二級(jí)導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Vue.js?是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式?JavaScript?框架,它提供了多種方法來實(shí)現(xiàn)頁面之間的導(dǎo)航,本文將詳細(xì)介紹?Vue?3?中的各種頁面跳轉(zhuǎn)方式,有需要的小伙伴可以參考一下2024-12-12
Vue.js 實(shí)現(xiàn)tab切換并變色操作講解
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)tab切換并變色操作講解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
uniapp模仿微信實(shí)現(xiàn)聊天界面的示例代碼
這篇文章主要介紹了如何利用uniapp模仿微信，實(shí)現(xiàn)一個(gè)聊天界面。文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例
下面小編就為大家分享一篇vue.js 嵌套循環(huán)、if判斷、動(dòng)態(tài)刪除的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue-element Tree樹形控件填坑路，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03