## Vue组件通信 父子、兄弟、非父子 ### 1、父组件向子组件通信 **方法一：props** ~~~ <template> <child :msg="message"></child> </template> ~~~ ~~~ <template> <div>{{msg}}</div> </template> <script> export default { props: { msg: { type: String, required: true } } } </script> ~~~ **方法二：使用$children** 使用`$children`可以在父组件中访问子组件。比如调用子组件的方法，并传入值等。 ### 2、子组件向父组件通信 **方法一：使用vue事件** 父组件向子组件传递事件方法，子组件通过`$emit`触发事件，回调给父组件。 ~~~ <template> <child @msgFunc="func"></child> </template> <script> import child from './child.vue'; export default { components: { child }, methods: { func (msg) { console.log(msg); // ssss } } } </script> ~~~ ~~~ <template> <button @click="handleClick">点我</button> </template> <script> export default { props: { msg: { type: String, required: true } }, methods () { handleClick () { //........ this.$emit('msgFunc', 'ssss'); } } } </script> ~~~ **方法二：使用$parent** 使用`$parent`可以访问父组件的实例，当然也就可以访问父组件的属性和方法了。 ## 3、非父子组件、兄弟组件之间的数据传递 非父子组件通信，Vue官方推荐**使用一个Vue实例作为中央事件总线**。 意思就是将一个公共状态保存在一个这些组件共用的一个父组件上，这样就可以使用子组件通信父组件的方式来间接的完成通信了。