vue2.0中的组件通信

vue2.0中的组件通信

vue中组件是模块化开发的基础，在组件A中使用了组件B，那他们必然需要数据通信，父组件要将数据传递给自组建，子组件要通知父组件自己内部发生的事情。

在vue.js中父子组件的关系可以总结为props down, events up，父组件通过props向下传递数据给子组件，子组件通过events给父组件反馈消息，引用官方的一张图，来看看他们是怎么工作的

1、父子组件通信

①父组件向子组件传递数据,子组件需要显式的用props选项声明它期待接受的数据

父组件传递数据：

<parent> <child :msg="msg"></child>
</parent>export default {data() {return {msg: [1, 2, 3] }}
}子组件接收数据:
export default {props: {msg: {type: Array,default() {return [] // 这里可以写默认值}}}
}

初学者常犯的错误是使用字面量语法传递数值

<child some-props="1"></child>

它是一个字面prop，传递的是字符串1，而不是number，如果想传递number类型的数值，需要使用v-bind。把它的值当作JaveScript表达式计算：

<child v-bind:some-props="1"></child>

在vue中，子组件是不允许直接修改父组件通过props传递过来的数据，这样会导致父组件和子组件耦合，并且父组件的数据可能会被任意子组件修改，另外每次父组件更新，子组件相应的props都会更新为最新值。之所以想修改props中的数据是因为：

1、我们希望把props中的数据当作局部数据使用

2、希望把props中的数据处理成其他数据使用

对于这两种方式我们应该正确的处理为：

定义一个局部变量，并用props的值初始化它
props: {someProp: {type: String,default: ""}
},
data () {return {initData: this.someProp}
}定义一个computed，处理props的值并返回
props: {someProp: {type: String,default: ""}
},
computed: {normalData() {return im().toLowerCase()}
}

需要注意的是：JavaScript中数组和对象是引用类型，指向同一内存空间，如果props是数组或对象，在子组件内部直接改变它会影响父组件的状态。

②子组件与父组件通信

我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
父组件可以直接在子组件使用的地方使用v-on绑定事件

父组件绑定事件和传递数据:
<parent> <child @upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法 
</parent>export default {data() {return {msg: '123'}},methods: { change(msg) { this.msg = msg; // 接收子组件传递过来的参数，并更新msg，从而子组件也相应的更新msg} }
}子组件接收数据和触发事件:
<template> <div @click="up">{{msg}}</div>
</template> export default {props: {msg: {type: String,default: ''}},methods: { up() { this.$emit('upup','updateMsg'); //主动触发upup方法，'updateMsg'为向父组件传递的数据 } }
}

③ 父组件如何触发子组件的事件

<parent @click="doSomeThing"><child ref="childComp"></child>
</parent>export default {methods: {doSomeThing() {this.$sSir('123')}}
}<template></template>export default{methods: {yesSir(a) {console.log(a) // 123}}
}

2、非父子组件通信

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

新建一个bus.js用于存储我们空的事件中转站：

import Vue from 'vue'export var bus = new Vue()

组件a通过$on绑定事件:

<template>
</template>
import { bus } from 'bus.js'
export default {created() {bus.$on('change', () => { //接收事件this.msg = 'hehe';});}
}

组件b通过$emit绑定事件:

<div @click="eve"></div>import { bus } from 'bus.js'
export default {methods: {eve() {bus.$emit('change','hehe'); //触发事件}}
}