vue 父子传值

1.父传子

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

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

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

child：

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没有绑定值。

2.子传父

子组件向父组件传值 
由于在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;
    }
}

非父子组件之间的通讯 
有时候两个非父子关系组件也需要通信 。在简单的场景下，可以使用一个空的 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';
    });
}

在数据简单的情况下可以使用中转或者父组件传值给子组件的方法进行传值，在数据比较多而杂的情况下，应该考虑使用专门的状态管理模式 Vuex插件来实现组件间的通讯.

非父子组件通信

在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...

为了便于开发，vue 推出了一个状态管理工具 vuex，可以很方便实现组件之间的参数传递