溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
新創建一個vue實例用于調度事件的綁定和發送
可以做到同級組件相互通訊，傳遞參數，點擊第一個組件會修改第二個組件的label值，點擊第二個組件會修改第二個組件的label值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<one></one>
<two></two>
</div>
</body>
<script>
// 使用一個vue實例 作為事件的載體,用于綁定事件和處理發送事件，作為調度中心
let eventBus = new Vue()
let one = {
template: '<div>{{val}} <button @click="click">click</button></div>',
data() {
return {
val: 0
}
},
created() {
//為one綁定事件，如果two_click事件發生了，則執行回調函數
eventBus.$on('two_click',
(val) => {
// 這個this 指的是one的vue實例
this.val = val
}
)
},
methods: {
click() {
// 如果one被點擊了，則發送一個one_click的事件，并傳遞一個參數
eventBus.$emit('one_click', 11)
}
}
}
let two = {
template: '<div>{{val}} <button @click="click">click</button></div>',
data() {
return {
val: 0
}
},
created() {
eventBus.$on('one_click',
(val) => {
this.val = val
})
},
methods: {
click() {
eventBus.$emit('two_click', 22)
}
}
}
new Vue({
el: '#app',
components: {
one,
two
}
})
</script>
</html>
總結
以上所述是小編給大家介紹的vue 使用eventBus實現同級組件的通訊，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
