兄弟组件的传值
兄弟组件 - 传值非父子组件,就是兄弟组件,兄弟组件之间并无任何关系,如果需要传值,需要借助中间方,如:租客 > 中介 > 房东使用 中央事件总线 ,其实就是一个新的vue实例传值const bus = new Vue();接收数据的一方,通过$on 先监听自定义事件,并接收值发送数据的一方,通过$emit触发事件,并传值总结:- bus.$emit()触发事件:发- bus.$on(
·
兄弟组件 - 传值
- 非父子组件,就是兄弟组件,兄弟组件之间并无任何关系,如果需要传值,需要借助中间方,如:
租客 > 中介 > 房东 - 使用
中央事件总线
,其实就是一个新的vue实例传值
const bus = new Vue();
- 接收数据的一方,通过
$on
先监听自定义事件,并接收值 - 发送数据的一方,通过
$emit
触发事件,并传值
总结:
- bus.$emit() 触发事件:发
- bus.$on() 绑定事件:收
兄弟组件的数据传输:
- 准备好要传递的数据
- 定义中央事件总线:let bus = new Vue();
- 在要发送数据的组件内部,通过中央事件总线,使用:bus.$emit(要出发的事件名,要发送的数据)准备触发自定义事件,并发送数据
- 在要接收数据的组件内部,通过中央事件总线,使用bus.$on(要绑定的事件名,事件处理方法)自定义将要被触发的事件,并接默认参数
代码示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟传值</title>
<style type="text/css">
div{border:solid 1px black;padding: 10px;margin: 10px;}
</style>
</head>
<body>
<div id="app">
<my-nav></my-nav>
<my-cont></my-cont>
</div>
</body>
<script src="vuue.js"></script>
<template id="nav">
<div>
<ul>
<li @click="sendData('手机')">手机</li>
<li @click="sendData('电脑')">电脑</li>
<li @click="sendData('音箱')">音箱</li>
</ul>
</div>
</template>
<template id="cont">
<div>
<div>这里是{{tit}}主场</div>
</div>
</template>
<script>
// 1.使用 中央事件总线 ,其实就是一个新的vue实例传值
const bus = new Vue();
const Nav = {
template: "#nav",
methods: {
sendData(i) {
// 3. 发送数据的一方,触发事件,并传值
bus.$emit("titData", i);
}
},
}
const Cont = {
template: "#cont",
data() {
return {
tit: "手机"
}
},
created() {
// 2.接收数据的一方,监听自定义事件,并接收值
bus.$on("titData", (res) => {
this.tit = res;
})
},
}
const vm = new Vue({
el: "#app",
components: {
"my-nav": Nav,
"my-cont": Cont,
}
})
</script>
</html>
更多推荐
已为社区贡献2条内容
所有评论(0)