vue实现父子组件、兄弟组件间通信

1. 父传子
   父组件（app.vue）

   <template>
     <div id="app">
       <hello-world :person="user"></hello-world>
     </div>
   </template>	
   <script>
     import HelloWorld from './components/HelloWorld'
     export default {
       data(){
       return {
         user:{
           name: '兔子小声',age: 12,weight:'50kg'
         }
       }
     },
       components:{
         HelloWorld
       }
     }
   </script>	
   <style>
   </style>
   

   子组件（HelloWorld.vue）

   <template>
     <div class="chind">
       <div>{{person.name}}</div>
       <br/>
       <div>{{person.age}}</div>
       <br/>
       <div>{{person.weight}}</div>
     </div>
   </template>
   
   <script>
     export default {
       props:['person']//主要是通过props来接受父组件传过来的值
     }
   </script>
   <style scoped>
   </style>
   

2. 子传父
   父组件（app.vue）

   <template>
     <div id="app">
       <hello-world @child-msg="ListenChild"></hello-world>
       <div>{{childWorld}}</div>
     </div>
   </template>
   <script>
     import HelloWorld from './components/HelloWorld'
     export default {
       data(){
         return {
           childWorld: '这是父组件'
         }
       },
       components:{
         HelloWorld
       },
       methods:{
         ListenChild:function(msg){
           this.childWorld=msg;
         }
       }
     }
   </script>
   <style>
   </style>
   
   

   子组件（HelloWorld.vue）

   <template>
   	  <button @click="transfer">点我</button>
   	</template>
   	
   	<script>
   	  export default {
   	    data: function () {
   	      return {
   	        msg: '我是子组件，我要传给父组件'
   	      }
   	    },
   	    methods: {
   	      transfer: function(){
   	        this.$emit('child-msg',this.msg);
   	      }
   	    }
   	  }
   	</script>
   	<style scoped>
   	</style>
   

3. 兄弟组件间传值

   <template>
     <div id="app">
       <bro0></bro0>
       <bro2></bro2>
     </div>
   </template>
   <script>
     import Vue from 'vue';
     var bus = new Vue();//这个对象没有其他含义，仅仅就是一个信息对象
     Vue.component("bro0",{
       template:"<div><button @click='send'>组建一</button></div>",
       data:function () {
         return {
           person : {name:'小明'}
         }
       },
       methods:{
         send:function () {
           bus.$emit("bro",this.person);//$emit这个方法会触发一个事件
         }
       }
     });
     Vue.component("bro2",{
       data:function () {
         return{
           bro:{}
         }
       },
       template:"<div>我是第二个组件--{{bro.name}}</div>",
       created:function () {
         var that=this;
         bus.$on("bro",function (msg) {
           that.bro=msg;
         })
       }
     });
   </script>
   <style>
   </style>
   

总结：

父传子：
1.子组件在props中创建一个属性，用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中绑定子组件props中创建的属性

子传父：
1.子组件中注册一个事件来触发一个该自定义事件，将需要传的值作为$emit的第二个参数，并作为实参传给响应自定义事件的方法；
2.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听（这里父组件同样需要一个事件来监听子组件注册的自定义事件，并在第二个参数上接受子组件传过来的参数）

兄弟组件（此处实例已改）：
1.创建中转总线，在src/assets/下创建一个transfer.js,只创建了一个新的Vue实例，起组件之间通信的桥梁作用；
2.在trsFun函数中用$emit触发了一个click事件，并传递了一个参数,$emit实例方法触发当前实例(此处的当前实例指向bus)上的事件,附加参数都会传给监听器回调；
3.$on监听当前实例上的事件(此处当前实例为transfer)。事件可以由$emit触发，回调函数会接收所有传入事件触发函数$emit的额外参数