vue兄弟组件传递数据的实例

new Vue({ el: '#app', router, store, template: '<App/>', components: { App }, data:{  eventHub:new Vue() // 在main.js设置所有组件都能用调用 },  }) 

<template> <div v-on:click="on()"></div> </template><script>export default { data(){ return{ datas:"数据"}}, methods:{ on(){  this.$root.eventHunb.$emit("eventName",this.datas)   //$emit是触发事件，当我们点击on事件的时候，$emit会触发其他组件的eventName事件， 把this.datas数据传递到其他组件中 } } } </scrpt>

<template><div>{{datas}}</div></template><script>exports default{data(){return{datas:""}},created(){//组件一跟组件二都要绑定相同的eventNamethis.$root.eventHub.$on("eventName",(tar) = > {this.fn(tar) //$on是监听事件，如果组件一得$emit触发了，$on就会触发this.fn事件})}methods:{fn:function(tar){this.datas = tar}}}</script>