Vue兩個同級組件傳值實(shí)現(xiàn)
更新時間：2021年07月15日 15:42:27 作者：前端_ZLB
Vue組件之間是有聯(lián)系的，避免不了組件之間要互相傳值，那么如何實(shí)現(xiàn)Vue兩個同級組件傳值，本文就來介紹一下，感興趣的可以了解一下
Vue組件之間是有聯(lián)系的，避免不了組件之間要互相傳值，父給子使用v-bind綁定自定義屬性和使用props來接受
子給父使用@自定義事件='函數(shù)' this.$emit('自定義事件','要發(fā)送的內(nèi)容')，子組件通過$emit來觸發(fā)父組件的函數(shù)來實(shí)現(xiàn)
但是兩個同級組件之間這么互相傳值
<div id='app'>
<children1></children1>
<children2></children2>
</div>
<script>
var children1 = {};
var children2 = {};
var vm = new Vue({
el:'#app',
components:{
children1,
children2
}
})
</script>
現(xiàn)在要將children1組件中的數(shù)據(jù)傳給children2組件
主要使用到vue實(shí)例中的$on()和$emit()
<div id='app'>
<children1></children1>
<children2></children2>
</div>
<script>
var Event = new Vue({}); // 創(chuàng)建一個vue實(shí)例用來作為傳值的媒介
var children1 = {
template:`
<div>
<button @click='send'>點(diǎn)我給children2組件發(fā)送數(shù)據(jù)</button>
</div>
`,
data(){
return {
msg:'我是要給children2發(fā)送的數(shù)據(jù)'
}
},
methods:{
send(){
Event.$emit('go',this.msg)
}
}
};
var children2 = {
template:`
<div>
<h2>從children1組件接收到的值：{{msg1}}</h2>
</div>
`,
data(){
return{
msg1:''
}
},
created(){
Event.$on('go',(v) => { // 必須使用箭頭函數(shù)因?yàn)閠his
this.msg1 = v;
})
}
};
var vm = new Vue({
el:'#app',
components:{
children1,
children2
}
})
</script>
chilren1組件要發(fā)送數(shù)據(jù)使用的是Event.$emit()
chilren2組件要接收數(shù)據(jù)使用Eevent.$on()
到此這篇關(guān)于Vue兩個同級組件傳值實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 同級組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中html2canvas給指定區(qū)域添加滿屏水印
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
項目中往往都是添加動態(tài)路由，如何刪除已經(jīng)添加進(jìn)來的路由往往被忽視，為此這里做一下記錄，感興趣的朋友跟隨小編一起看看吧2023-10-10
Vue項目結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能(實(shí)例代碼)
這篇文章主要介紹了Vue項目中結(jié)合Vue-layer實(shí)現(xiàn)彈框式編輯功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
在本篇文章里小編給大家分享的是關(guān)于Vue computed 計算屬性代碼實(shí)例，需要的朋友們可以參考下。2020-04-04
Vue2.0實(shí)現(xiàn)1.0的搜索過濾器功能實(shí)例代碼
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)1.0的搜索過濾器功能實(shí)例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
vue中v-if?和v-permission?共同使用的坑及解決方案
這篇文章主要介紹了vue中v-if?和v-permission?共同使用的坑及解決方案的相關(guān)資料,需要的朋友可以參考下2023-07-07
在實(shí)際應(yīng)用場景中,假如有一個下載或者導(dǎo)出請求,數(shù)據(jù)量非常大的情況下,接口響應(yīng)的會很慢,這時候我我們想中斷請求,該怎么做呢？本文給大家介紹了axios請求中斷的幾種方法,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了Vue使用預(yù)渲染代替SSR的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue實(shí)現(xiàn)實(shí)時刷新時間的功能
這篇文章主要為大家詳細(xì)介紹了如何Vue利用實(shí)現(xiàn)實(shí)時刷新時間的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以了解下2023-12-12