vue2 组件通信

1. 父子组件通信

尽管我们可以使用
1️⃣this.$parent访问父组件实例
2️⃣this.$children访问所有的子组件实例
3️⃣this.$root组件所在的根实例

但这在vue中是不建议直接子组件操作父组件的数据的，或者父组件操作子组件的参数。

• 父传子： 通过props
• 子传父：这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的。

官网通信说明图

父组件代码

 //parent.html子组件的引入 
<v-test :title="testTitle" @changeTitle="changes"></v-test>
////监听子组件触发的changeTitle事件,然后调用changes方法
//parent.vue
import test from XXX;
export default {
    components: {
       vTest: test
    },
    data (){
        return {
            testTitle: "我是子组件标题名称"
        }
    },
  methods: {
      changes (msg) {
          this.testTitle = msg;
      }
  }
}

子组件代码

child.html
<template>
<div>  {{title}}</div>
<button @click="changeInfo"></button>
</template>


 export default {
    props: {
        title: {
          default: ""
        }
    },
    
  methods: {
      changeInfo () {
        ////主动触发changeTitle方法，'hehe'为向父组件传递的数据
         this.$emit("changeTitle","我是新的title");
      }
  }
}

2. 兄弟组件通信

如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信。
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

let bus = new Vue(); //创建事件中心
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

如果业务涉及很多的组件通信，推荐使用Vuex。

什么情况下我应该使用 Vuex？
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。