<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!--
eventbus 广播 bus总线
-->
<div id="app">
<div>
<p>{{mov1}}</p>
<first-com></first-com>
<second-com></second-com>
</div>
</div>
<template id='tem'>
<fieldset>
<legend>
{{word}}
</legend>
<button @click='send'>给小弟</button>
</fieldset>
</template>
<template id='tem1'>
<fieldset>
<legend>
{{word}}
</legend>
<button @click='send'>给大哥</button>
</fieldset>
</template>
<script src="../../vue.js"></script>
<script>
/* 事件总线的元素原理
使用 vue 中 $on 注册事件 和 $emit 触发事件 */
let eventbus = new Vue();//创建总线
Vue.component('first-com', {
data() {
return {
word: '大哥'
}
},
template: "#tem",
methods: {
send(){
// 使用事件总线 触发方法 并传递参数
eventbus.$emit("tobro",'大哥的奖赏')
}
},
mounted() {
//在生命周期函数中 注册方法
eventbus.$on('tobig',function(e){
console.log(e)
eventbus.$off('tobig')//移除了事件监听
})
/* 移除事件
eventbus.$off('tobig',{}) */
},
})
Vue.component('second-com', {
data() {
return {
word: '二哥'
}
},
template: "#tem1",
methods: {
send(){
eventbus.$emit("tobig",'小弟的保护费')
eventbus.$emit("tobig",'二小弟的保护费')
}
},
mounted() {
//在生命周期函数中 注册方法
eventbus.$on('tobro',function(e){
console.log(e)
eventbus.$off('tobro')
})
},
})
const vm = new Vue({
el: '#app',
data: {
name: 'ycy',
word: 'abcabcbacbcbab岁月的童话',
mov1: "狼的孩子雨和雪"
}
});
</script>
</body>
</html>
eventbus 事件总线 用于兄弟组件之间的通信 $on 注册事件$emit 发送事件
最新推荐文章于 2024-05-15 10:00:00 发布