一羊苟、$emit傳值[父傳子和子傳父]
1蜡励、首先創(chuàng)建好父子組件和eventBus.js事件監(jiān)聽
![]()
image.png
image.png
1.0、在父組件的操作=>父傳子
<template>
<div class="fuqin">
<h1>父視圖</h1>
<button @click="fuclick">父視圖按鈕點(diǎn)擊穿值給子視圖</button>
<ZiShiTu class="zishitu"></ZiShiTu>
</div>
</template>
<script>
import ZiShiTu from './ZiShiTu.vue'//引入子視圖
import connect from '../js/eventBus'//引入js
export default {
data() {
return {
zhuname: '高啟強(qiáng)',
usname: '高啟盛',
hhname: '唐小龍',
kkkl: '唐小虎',
}
},
components: {
ZiShiTu
},
methods: {
fuclick() {//觸發(fā)
// 點(diǎn)擊按鈕將參數(shù)傳遞給子視圖
connect.$emit("activeName", this.zhuname, this.usname, this.hhname, this.kkkl);
},
},
}
</script>
1.1、在子組件中接收父視圖發(fā)過來的參數(shù)
//同理
import connect from '../js/eventBus'
杏糙。搔啊。。嗜愈。
created() {
// 接收從父視圖傳過來的參數(shù)
connect.$on('activeName', (item0, item1, item2, item3) => {
console.log('從父視圖傳過來的值:', item0, item1, item2, item3);
});
},
結(jié)果打印.png
2锨天、在子組件的操作=>子傳父
<template>
<div>
<h1>子視圖</h1>
<button @click="changeFather">子視圖按鈕點(diǎn)擊穿值給父視圖</button>
</div>
</template>
<script>
export default {
data() {
return {
dianying: '狂飆',
dianshiju: '鐵道有熊隊(duì)',
zongyi:'奔跑吧!code'
}
},
created() {
},
methods: {
changeFather() {//觸發(fā)按鈕將值傳給父視圖
this.$emit("changeEvent", this.dianying);
}
},
}
</script>
2.1、在父視圖中接收操作
在父視圖中接收操作.png
從子視圖傳遞過來的值.png
打印log.png
