Vue2组件通信

【props】

父组件通过props向子组件传递数据；

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message'],
};
</script>

【$emit】

子组件通过$emit触发事件，父组件监听事件并处理数据；

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from Child');
    },
  },
};
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @message-from-child="handleMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  methods: {
    handleMessage(message) {
      console.log(message); // 输出: Hello from Child
    },
  },
};
</script>

【Event Bus】

创建一个全局事件总线，兄弟组件通过事件总线通信；

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

// 组件 A
EventBus.$emit('message', 'Hello from A');

// 组件 B
EventBus.$on('message', (message) => {
  console.log(message); // 输出: Hello from A
});

【provide和inject】

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据；

// 祖先组件
export default {
  provide() {
    return {
      message: 'Hello from Ancestor',
    };
  },
};

// 后代组件
export default {
  inject: ['message'],
};

【Vuex】

Vuex 是 Vue 2 的官方状态管理工具；

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: { message: 'Hello from Vuex' },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    },
  },
});

// 组件
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
  },
  methods: {
    updateMessage() {
      this.$store.commit('setMessage', 'New Message');
    },
  },
};