<!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>
</head>
<body>
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<div id="myApp">
<my-com1></my-com1>
<hr>
<my-com2></my-com2>
</div>
<!-- 组件模板 -->
<template id='myTem1'>
<div>
组件1发数据: <button @click="change">{{count1}}</button>
</div>
</template>
<template id='myTem2'>
<div>
组件2接数据:{{count2}}
</div>
</template>
<script>
// 第一步:在全部范围内,创建一个vue空对象,取名为bus总线
var bus = new Vue()
Vue.component('myCom1', {
template: '#myTem1',
data() {
return {
count1: 0
}
},
methods: {
change() {
this.count1++;
console.log("1数据发送", this.count1);
// 第二步:需要发送数据的时候,使用bus总线调用$emit()发送,而不是this
bus.$emit("myevent", this.count1)
}
}
})
Vue.component('myCom2', {
template: '#myTem2',
data() {
return {
count2: 0
}
},
created() {
// 第三步:在目标组件的初始化函数中,使用bus总线监听自定义事件,获取数据
bus.$on("myevent", data => {
console.log("2数据接收", data);
this.count2 = data;
})
// 假设初始化的时候 组件2没有创建 10秒之后组组件2才创建出来,用计时器模拟
setTimeout(() => {
console.log("模拟组件2延迟初始化,开始监听事件");
// $on监听事件可以重复监听,事件处理函数都会执行
bus.$on("myevent", data => {
console.log("3数据接收", data);
this.count2 = data;
})
}, 10000);
// 结论:10秒内:组件2还没有初始化,组件1发射事件,就接收不到,因为事件必须先on绑定,在emit发射,才能正常触发事件
},
})
new Vue({
el: '#myApp',
data: {
},
methods: {
},
})
// 总结:非父子组件(兄弟组件)传值的步骤
// 1.全局范围内创建一个vue空对象,取名为bus总线
// 2.使用bus总线调用$emit发送
// 3.在目标组件的初始化函数中,使用bus总线监听自定义事件,获取数据
// 注意事项:
// 1.使用bue总线接收数据的时候,事件处理函数要使用箭头函数来写,保证this指向为当前组件对象
// 2.bus.$on 监听必须在bus.$emit发送之前执行,才能触发事件,接收数据
</script>
</body>
</html>
vue2非父子传值
最新推荐文章于 2024-05-12 14:23:18 发布