vue.js不同组件之间通信

系统管理员 2022-04-06 11:56 266阅读 0赞

vue.js不同组件（或者同一组件兄弟子组件）间通信，简单情况下，VUE推荐使用空的VUE实例充当事件总线。今天按官网试着做了一个例子。  
  
　　例子说明：主持人组件发布命令，1个门卫组件、2个参会者组件接收命令。  
  
　　效果如下图所示：  
\[align=center\]  
\[img\]http://dl2.iteye.com/upload/attachment/0128/2666/36af3e48-b368-395d-8cdf-bab3908f61f4.png\[/img\]  
\[/align\]  
  
　　代码比较简单，不多解释了。

<!DOCTYPE html>
    
    <html>
    <head>
        <meta charset="utf-8">
        <title>vue事件总线示例</title>
        <script type="text/javascript" src="../lib/vue.js"></script>
    </head>
    <body>
    	<div id="meetingHost">
    	 	主持人命令：<select v-model="command">
    	 		<option value="开会">开会</option>
    	 		<option value="休息">休息</option>
    	 		<option value="散会">散会</option>
    	 	</select>
    	 	<button type="button" @click="sendCommand">发布命令</button>
    	</div>
    	<hr>
    	<div id="guard">
    	 	门卫收到命令：{
       {commandOfHost}}
    	</div>
    
    	<div id="guest">
    		<meeting-guest name="张三"></meeting-guest>
    		<meeting-guest name="李四"></meeting-guest>
    	</div>
    
    	<script type="text/javascript">
    		var Bus = new Vue();//事件总线
    
    		//主持人
    		var vueHost = new Vue({
       
    			el:'#meetingHost',
    			data:function(){
       
    				return {
       
    					command:''
    				};
    	        },
    	        methods:{
       
    	            sendCommand:function(){
       
    	            	Bus.$emit('hostCommand',this.command);
    	            }
    			}
    		});
    
    		//自定义组件，参会者
    		Vue.component('meeting-guest', {
       
    			template: '<div>{
       {name}}收到命令：{
       { commandOfHost }}</div>',
    			props:['name'],
    			data: function(){
       
    				return {
       
    					commandOfHost: ''
    				};
    			},
    			created:function(){
       
    				var self = this;
    				Bus.$on('hostCommand',function(command){
       
    					self.commandOfHost = command;
    				});
    			}
    		});
    
    		var vueGuest = new Vue({el:'#guest'});
    
    		//门卫
    		var vueGuard = new Vue({
       
    			el:"#guard",
    			data:function(){
       
    				return {
       
    					commandOfHost:''
    				};
    			},
    			created:function(){
       
    				var self = this;
    				Bus.$on('hostCommand',function(command){
       
    					self.commandOfHost = command;
    				});
    			}
    		});
    	</script>
    </body>
    </html>