Vue兩個(gè)同級(jí)組件傳值實(shí)現(xiàn)
Vue組件之間是有聯(lián)系的，避免不了組件之間要互相傳值，父給子使用v-bind綁定自定義屬性和使用props來(lái)接受
子給父使用@自定義事件='函數(shù)' this.$emit('自定義事件','要發(fā)送的內(nèi)容')，子組件通過(guò)$emit來(lái)觸發(fā)父組件的函數(shù)來(lái)實(shí)現(xiàn)
但是兩個(gè)同級(jí)組件之間這么互相傳值
<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)建一個(gè)vue實(shí)例用來(lái)作為傳值的媒介
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兩個(gè)同級(jí)組件傳值實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 同級(jí)組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue動(dòng)態(tài)添加store、路由和國(guó)際化配置方式
這篇文章主要介紹了vue動(dòng)態(tài)添加store、路由和國(guó)際化配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue.js響應(yīng)式原理解析與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue.js響應(yīng)式原理解析與實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
詳解mpvue中小程序自定義導(dǎo)航組件開發(fā)指南
這篇筆記主要記錄一下基于mpvue的小程序中實(shí)現(xiàn)自定義導(dǎo)航的思路及應(yīng)用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue項(xiàng)目之頁(yè)面class不生效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目之頁(yè)面class不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
凡是做SPA的項(xiàng)目,特別是移動(dòng)端的SAP項(xiàng)目,首屏加載速度必定是一個(gè)繞不過(guò)去的話題,下面這篇文章主要給大家介紹了關(guān)于Vue頁(yè)面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下2021-12-12
element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式
實(shí)習(xí)工作需要根據(jù)表格的狀態(tài)字段來(lái)設(shè)置列的樣式,所以這篇文章主要給大家介紹了關(guān)于element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式的相關(guān)資料,需要的朋友可以參考下2023-10-10
vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例
這篇文章主要介紹了vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
今天小編就為大家分享一篇vue表單自定義校驗(yàn)規(guī)則介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue-cli 是 vue.js 的腳手架工具，可以幫助我們編寫基礎(chǔ)代碼、快速搭建開發(fā)環(huán)境。下面這篇文章主要給大家介紹了關(guān)于vue-cli初始化項(xiàng)目中使用less的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起看看吧2018-08-08
Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當(dāng)刷新后數(shù)據(jù)會(huì)消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼，需要的朋友可以參考下2021-05-05