VUE中组件传值

父组件 —> 子组件

(1)父传值v-bind
父组件通过v-bind:data="data"传值，简写等同于:data="data"将数据传递给引用的子组件

(2)子接收props
子组件通过props接收父组件传的值

 props: {
    data: {
        type: Object,    //接收的数据类型
        required: true   //是否一定要接收
    }
},

//简单写法
 props: ['data']

props是单向绑定的，子组件不可以修改父组件的值，在子组件中修改props中的值会报错，想修改父组件传过来的值可以先拷贝出一个副本，改变副本的值

(3)使用
在子组件中即可以直接使用{{this.data}}使用

子组件 —> 父组件

法一：通过$emit触发事件进行传值
(1)子触发事件

methods: {
    deleteTodo(){
       this.$emit('del',this.todo.id) //触发一个名为'del'的事件，传递参数为this.todo.id
    }
},

(2)父监听事件
v-on: del="deleteTodo"简写@del="deleteTodo"

<Item @del="deleteTodo"></Item>   //监听del事件，处理函数为deleteTodo，此函数第一个参数为子组件$emit抛出来的参数this.todo.id

(3)使用

deleteTodo(id){
   //...利用子组件传来的id来处理一些事件
},

法二：通过v-model双向绑定

兄弟组件

法一：通过父组件中转
(1)子1通过$emit传值给父

(2)父再通过v-bind传值给子2

法二：借助bus中央事件总线
bus(一个空的vue对象)作为介质，辅助兄弟组件的传值

(1)新建Bus.js文件夹来new一个VUE空对象

import Vue from 'vue'
export default new Vue()

(2)子1通过bus.$emit触发事件传值

//引入bus
import bus from ...
methods: {
   foo(){
	bus.$emit('send',vaule)
   }
}

(3)子2通过bus.$on监听事件获取值

//引入bus
import bus from ...

//在created钩子内使用
//如果在mounted使用，它可能接受不到其他组件来自created钩子发出的事件
created() {
  bus.$on('send',function);   //第二个参数为函数，可以在函数里对子传过来的值进行绑定使用
}

//使用$bus.off解除，因为组件销毁后，就没必要把监听的句柄储存在vue-bus里了
beforedestroy() {
  bus.$off('send',function);
}