兄弟组件的传值

最新推荐文章于 2024-05-07 08:48:43 发布

噢，我明白了

最新推荐文章于 2024-05-07 08:48:43 发布

阅读量2.8k

点赞数 5

分类专栏：组件嵌套文章标签： vue js vue.js

本文链接：https://blog.csdn.net/qq_38980678/article/details/114501461

版权

组件嵌套专栏收录该内容

5 篇文章 0 订阅

订阅专栏

兄弟组件 - 传值

非父子组件，就是兄弟组件，兄弟组件之间并无任何关系，如果需要传值，需要借助中间方，如：
租客 > 中介 > 房东
使用 中央事件总线 ，其实就是一个新的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>

噢，我明白了

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
兄弟组件的传值

兄弟组件 - 传值非父子组件，就是兄弟组件，兄弟组件之间并无任何关系，如果需要传值，需要借助中间方，如：租客 > 中介 > 房东使用中央事件总线，其实就是一个新的vue实例传值const bus = new Vue();接收数据的一方，通过$on 先监听自定义事件，并接收值发送数据的一方，通过$emit触发事件，并传值总结：- bus.$emit() 触发事件：发 - bus.$on() 绑定事件：收兄弟组件的数据传输：准备好要传递的数据定
复制链接

扫一扫