兄弟组件间通信

阳光穿透心脏的1/2处 2022-06-02 12:12 227阅读 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 条评论，227人围观）

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

相关阅读

相关组件间通信

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

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

相关 vue父子兄弟之间的组件通信

vue组件通信的方式父子组件通信 > 父组件：father.vue <template> <div class="father">

￡神魔★判官ぃ/ 2023年01月01日 12:59/ 0 赞/ 261 阅读

相关 vue 兄弟组件通信

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

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

相关 React -- 组件间通信

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

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

相关兄弟组件间通信

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

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

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

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

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

相关 VUE：兄弟组件间传参

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

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

相关组件间通信

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

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

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

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

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

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

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

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