vue全家桶进阶之路17：组件与组件间的通信

在 Vue2 中，组件与组件之间的通信可以通过以下几种方式来实现：

1. Props 和 Events

这是 Vue2 中最基础和常用的父子组件通信方式。父组件通过属性传递数据给子组件，子组件通过事件触发向父组件传递数据。

父组件传递数据到子组件：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

子组件接收父组件传递的数据

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

子组件向父组件传递数据：

<template>
  <div>
    <button @click="$emit('update-message', 'Hello, Vue!')">Update Message</button>
  </div>
</template>

父组件监听子组件触发的事件：

<template>
  <div>
    <child-component @update-message="onMessageUpdated"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    onMessageUpdated(message) {
      console.log(message);
    }
  }
}
</script>

2. $parent 和 $children

在 Vue2 中，每个组件实例都有 $parent 和 $children 属性，可以用来访问组件的父组件和子组件实例。

父组件可以通过 $children 访问子组件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$children[0].message);
  }
}
</script>

子组件可以通过 $parent 访问父组件：

<template>
  <div>{{ $parent.message }}</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$parent.message);
  }
}
</script>

3. $refs

在 Vue2 中，可以使用 $refs 来访问组件的引用。可以通过 $refs 访问组件实例的方法和属性，也可以通过 $refs 传递数据。

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateMessage() {
      this.$refs.childComponent.updateMessage('Hello, Vue!');
    }
  }
}
</script>

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message:'Hello, World!' }

　　},

　　 methods: {

　　　　updateMessage(message) { this.message = message;}

　　}

　}

</script>

4. Event Bus 在 Vue2 中，可以使用事件总线来实现任意组件之间的通信。事件总线本质上是一个空的 Vue 实例，用来作为中央事件总线，任意组件都可以监听事件和触发事件。 创建事件总线：

```javascript
// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();


<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    updateMessage() {
      EventBus.$emit('update-message', 'Hello, Vue!');
    }
  }
}
</script>

组件之间传递数据：

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    updateMessage() {
      EventBus.$emit('update-message', 'Hello, Vue!');
    }
  }
}
</script>

组件接收数据：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  mounted() {
    EventBus.$on('update-message', message => {
      this.message = message;
    });
  }
}
</script>

5. Vuex

如果组件之间的通信比较复杂，或者需要在多个组件之间共享数据，可以使用 Vuex。Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它集中管理组件之间共享的数据。

创建 store：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    message: 'Hello, World!'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage(context, message) {
      context.commit('updateMessage', message);
    }
  }
});

在组件中访问 store 中的数据：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  }
}
</script>

在组件中触发 action：

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['updateMessage'])
  }
}
</script>

更多关于 Vuex 的内容可以参考官方文档：https://vuex.vuejs.org/zh/