Vue.js中兄弟組件之間互相傳值實例
更新時間：2017年06月01日 15:38:56 作者：小碼過河找八哥
本篇文章主要介紹了Vue.js中兄弟組件之間互相傳值實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
兄弟組件之間互相傳值，需要建立一個“中轉(zhuǎn)站”（新的vue實例），并且需要主動觸發(fā)。
實例上的$on方法來接受監(jiān)聽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件傳值</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<child1></child1>
<child2></child2>
</div>
<template id="c1">
<h1>~~~~~~我是哥哥~~~~{{msg}} <button @click='fn'>點擊</button></h1>
</template>
<template id="c2">
<h3>~~~~~~我是弟弟~~~~{{msg2}}</h3>
</template>
</body>
</html>
<script>
var Hub=new Vue(); // 1) 中轉(zhuǎn)站,其中不需要設(shè)置任何參數(shù)
var vm=new Vue({
el: '#box',
components:{
child1:{
template:'#c1',
data:function(){
return {
msg: 'hello'
}
},
methods:{
fn:function(){
// 2) 主動觸發(fā)監(jiān)聽(中轉(zhuǎn)站觸發(fā)監(jiān)聽)
console.log(this.msg); //hello
Hub.$emit('change',this.msg) //$emit觸發(fā)監(jiān)聽方法
}
}
},
child2:{
template:'#c2',
data:function(){
return {
msg2: 'world'
}
},
// 創(chuàng)建完成 new Vue create mount
// 鉤子函數(shù)
created(){
// 3) 接收監(jiān)聽 $on('事件名稱',function(val){}) val是傳遞過來的值
Hub.$on('change',function(val){
console.log(val) //hello
// this.msg2 = val;
})
}
}
}
})
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中el-date-picker type=daterange日期清空時不回顯的解決
這篇文章主要介紹了vue中el-date-picker type=daterange日期清空時不回顯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue3與webpack5安裝element-plus樣式webpack編譯報錯問題解決
這篇文章主要介紹了vue3與webpack5安裝element-plus樣式webpack編譯報錯,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
動態(tài)組件指的是動態(tài)切換組件的顯示與隱藏,這篇文章主要給大家介紹了關(guān)于vue學(xué)習(xí)記錄之動態(tài)組件的相關(guān)資料,本文通過示例代碼介紹介紹的非常詳細,需要的朋友可以參考下2022-10-10
vite+vue3中使用mock模擬數(shù)據(jù)問題
這篇文章主要介紹了vite+vue3中使用mock模擬數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇Vue 通過公共字段,拼接兩個對象數(shù)組的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-draggable實現(xiàn)拖拽表單的示例代碼
本文主要介紹了vue-draggable實現(xiàn)拖拽表單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
解決antd的Form組件setFieldsValue的警告問題
這篇文章主要介紹了解決antd的Form組件setFieldsValue的警告問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了詳解基于Vue-cli搭建的項目如何和后臺交互，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue中父子組件的參數(shù)傳遞和應(yīng)用示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01