兄弟组件间通信

阳光穿透心脏的1/2处 2022-06-02 12:12 214阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	<div id="example">
    		<xiong-da></xiong-da>
    		<xiong-er></xiong-er>
    	</div>
    
    	<script type="text/javascript">
    
    		//创建一个Vue实例，作为eventBus去使用
    		var bus=new Vue();
    
    		Vue.component('xiong-da',{
    			created:function(){
    				bus.$on('toDaEvent',function(msg){
    					console.log("熊二："+msg);
    				})
    			},
    			methods:{
    				notifyEr:function(){
    					bus.$emit('toErEvent','快跑，光头强来了');
    				}
    			},
    			template:`
    				<div>
    					<h1>这是熊大</h1>
    					<button @click="notifyEr">通知熊二</button>
    				</div>
    			`
    		});
    
    		Vue.component('xiong-er',{
    			created:function(){
    				bus.$on('toErEvent',function(msg){
    					//console.log(arguments);
    					console.log('熊大：'+msg);
    				});
    			},
    			methods:{
    				notifyDa:function(){
    					bus.$emit('toDaEvent','怕啥，看我的');
    				}
    			},
    			template:`
    				<div>
    					<h1>这是熊二</h1>
    					<button @click="notifyDa">回应熊大</button>
    				</div>
    			`
    		});
    
    		new Vue({
    			el:'#example',
    			data:{
    				msg:'VueJS is Awesome'
    			}
    		});
    	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关组件间通信

![1190185-20190926095204999-2127086789.png][] ![1190185-20190926095727123-461117341

布满荆棘的人生/ 2023年08月17日 17:09/ 0 赞/ 131 阅读

相关 vue 兄弟组件通信

event.js import Vue from 'vue'; export default new Vue(); import ev

淩亂°似流年/ 2022年11月06日 10:58/ 0 赞/ 212 阅读

相关 React -- 组件间通信

分为三种类型的通信关系： 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信父组件向子组件通信父组件通过子组件的props

╰半橙微兮°/ 2022年06月13日 00:30/ 0 赞/ 255 阅读

相关 angular4----组件间通信

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan]

你的名字/ 2022年06月07日 03:00/ 0 赞/ 254 阅读

相关兄弟组件间通信

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

阳光穿透心脏的1/2处/ 2022年06月02日 12:12/ 0 赞/ 215 阅读

相关组件间通信（父子通信）

（1）父->子通信 props down <!DOCTYPE html> <html> <head> <title></title>

╰半夏微凉°/ 2022年06月02日 12:06/ 0 赞/ 316 阅读

相关 VUE：兄弟组件间传参

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1、定义一个中间 eventBus.js ，只有

刺骨的言语ヽ痛彻心扉/ 2022年03月26日 06:58/ 0 赞/ 762 阅读

相关组件间通信

文章目录父组件向子组件通信子组件向父组件通信回调函数利用自定义事件机制父组件向子组件通信 React中数据的流动是

悠悠/ 2021年12月13日 02:27/ 0 赞/ 325 阅读

相关 vue 自定义事件兄弟组件间通信

首先 vue 实例有event对象可以实现自定义事件，实现兄弟组件间通信。项目结构：event.js 导出vue实例对象 Input.vue 和 list.vue

阳光穿透心脏的1/2处/ 2021年08月31日 00:18/ 0 赞/ 402 阅读

相关 Vue父子、兄弟组件通信

1.父组件向子组件传参数 * 父组件代码 <template> <div> <input type="text" v-mod...

测试账号/ 2021年01月19日 14:52/ 0 赞/ 751 阅读