Vue组件通讯

缺乏、安全感 2021-09-27 15:02 411阅读 0赞

![70][]

### 1.  自定义事件 ###

Vue的子组件用$.emit()来触发事件，父组件用$.on()来监听子组件的的事件

<div id="app">
    		<p>总数{
       {count}}</p>
    		<my-component @jia='total' @jian='total'></my-component>
    	</div>
    
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	<template id="myComponent">
    		<div>
    			<button @click="jiashu">+1</button>
    			<button @click="jianshu">-1</button>
    			<p>测试啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    		</div>
    	</template>
    	
    	<script type="text/javascript">
    		Vue.component('my-component',{
    			template : '#myComponent',
    			data: function(){
    				return{
    					newData: 0
    				}
    			},
    			methods:{
    				 jiashu:function(){
    					this.newData++;
    					this.$emit('jia',this.newData);
    				},
    				jianshu:function(){
    					this.newData--;
    					this.$emit('jian',this.newData);
    				} 
    			}
    		
    		});
    		new Vue({
    			el:"#app",
    			data:{
    				count:0
    			},
    			methods:{
    				total:function(count){
    					this.count = count;
    				}
    			}
    		});
    	</script>

上面示例中，子组件有两个按钮，分别实现+1、-1的效果，在改变组件的data “count”，通过$.emit（）再把他们传递给父组件，父组件用v-on：jia，v-on:jian。$.emit()第一个参数是自定义的事件的名称，后面的参数都是要传递的数据。后边的参数可以是没有，可以是有多个。

### 2. 非父子组件之间通讯 ###

在Vue.js. 2.x中，推荐使用一个空的Vue实例来作为中央事件总线，他就相当于一个中介。有一个组件把一个数据传递给这个空的Vue，然后谁需要(这里的谁指的是另外一个组件)这个数据，那么就管空的Vue要就好了。这两个组件没有任何联系。就好比租房者-中介-房东的关系。房东就相当于传数据的组件，空的Vue就相当于中介，需要数据的组件就相当于租房者。代码示例如下：

<div id="app">
    		<p>{
       {message}}</p>
    		<component-a>
    		
    		</component-a>
    	</div>
    	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	<template id="componentA">
    		<div>
    			<button @click="dianji">按钮</button>
    		</div>
    	</template>
    	
    	<script>
    	
    		var pub = new Vue();
    		
    		Vue.component('component-a',{
    			template : '#componentA',
    			methods:{
    				dianji:function(){
    					pub.$emit("on-message","传递的数据");
    				}
    			}
    		});
    		
    		new Vue({
    			el:'#app',
    			data: {
    				message:""
    			},
    			mounted:function(){
    				var _this = this;
    				pub.$on("on-message",function(msg){
    					_this.message = msg;
    				})
    			}
    		})
    	
    	</script>

这种方法巧妙的实现了组件之间的通讯，包括父子、兄弟、跨级，如果深入的使用，可以给pub扩展实例，给他添加data、method、computed等选项，这些都可以是共有的。在具体业务中，可以将经常需要共享一些通用的信息，比如用户登陆的具体信息。

。。。。除了这种方式，常见的方式还有**父链**、**子组件索引**

[70]: /images/20210923/04aa530bc1904478b2b086c455b5d9c6.png