Vue.js父子组件和非父子组件间的传值通信

Vue.js是一套构建用户界面的渐进式框架，小巧、灵活、简洁。
下面介绍一下Vue.js父子组件和非父子组件间的传值通信的几种常见方法。

父组件向子组件传值：
parent：

<parent>
    <child :message="msg"></child>
</parent>

data(){
    return {
        msg: "this is parent message"
    }
}

child：

<div>
    <p>{{message}}</p>
</div>

data(){
    props:["message"]
    }

or

props: {
    message: {
        type: String,                 //可指定接收类型，如:Array.
        default:"this is default"     //可设置默认值
    }
}

props: {
    message: {
        type: Array,
        default: ['foo','bar','baz']   //默认值
    }
}

注意：parent中的子组件标签中传入的是 :message, (v-bind：“message”)，如果传入的是message=“msg”，那么子组件接收到的是"msg"这个字符串，因为message没有绑定值。

子组件向父组件传值
由于在vue中子组件不能更改父组件中的内容，所以可以通过子组件触发事件来传值给父组件。

child：

<template>
	<button v-on:click ='setValue'>setValue</button>
</template>

data(){
    return {
        value: "sendValue"
    }
}，
methods:{
	setValue:function(){ 
	    this.$emit('getdata',this.value); //this.value为向父组件传递的数据
	}
}

parent：

<div id="app">
    <child @getdata="receive" ></child> //自动监听由子组件"注册"的 'getdata'事件,然后调用receive方法来更改数据
    <p>{{value}}</p>
</div>

data(){
  	return{
  		value:"default"
  	}
  },
methods: {
    receive:function(val) {
        this.value = val;
    }
}

这时候就可以看到父组件的p标签中的数据更新了…

非父子组件之间的通讯
有时候两个非父子关系组件也需要通信 。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线，类似于一个“中转站”，进行发送和接收数据。

event.js

import Vue from 'vue'
var bus = new Vue()     //创建事件"中转站"
export default bus

or

import Vue from 'vue'
export default new Vue

a.vue

<button @click="btnclick">content</button >
// 触发组件 A 中的事件

import eventdata from '.../event.js'
methods: {
    btnclick(){
        eventdata .$emit('transfer',this.message);  
    }
}

b.vue

// 在组件B监听事件
<template>
	<div>{{message}}</div>
</template>

import eventdata from '.../event.js'
data(){
	return{
       message:"default"
	}
},
created() {
    eventdata .$on('transfer', function(msg){     //接收事件
        this.message = 'msg';
    });
}

非父子（兄弟）组件还有一种更为方便的使用方法：
1.在main.js中注册全局的bus

Vue.prototype.bus=new Vue();

2.在要传递数据的组件中使用 this.bus.$emit(‘自定义事件名’,data)

methods:{
        btnClick(){
        	this.bus.$emit('transferData', this.msg)
       }
}

3.接受数据的组件中使用 this.bus.$on(“自定义事件名”, msg => {})

mounted() {
    this.bus.$on("transferData", msg => {
  	 this.message = msg;
   });
}

就可以实现一个简便易用功能强大的组件间无障碍数据传递了.
在一般情况下可以使用中转或者父组件传值给子组件的方法进行传值，在项目庞大，数据较多而杂的情况下，应该考虑使用专门的状态管理模式 Vuex插件来实现组件间的通讯.