Web前端 ---- 【vue】vue 组件传值（props、全局事件总线、消息的订阅与发布）

在 Vue.js 中，组件之间的数据传递是一个常见的需求。Vue 提供了多种方法来实现这一目标，包括 props、全局事件总线、消息的订阅与发布等。下面我将为你详细解释这些方法：

1. Props

Props 是 Vue 组件之间传递数据的基础方式。父组件可以通过 props 将数据传递给子组件。

// 父组件
<template>
  <child-component :message="parentMessage"></child-component>
</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>

2. 全局事件总线

Vue 实例实现了一个事件接口，你可以使用它来创建自定义事件。全局事件总线是一种在组件之间传递数据的模式，但它不是 Vue 的官方推荐方式，因为它可能会使得代码的逻辑复杂化和难以维护。但在某些场景下，它仍然是一个有用的工具。

首先，你需要在你的 main.js 文件中创建一个全局的 Vue 实例：

// main.js
import Vue from 'vue';
import App from './App.vue';
export const EventBus = new Vue();
new Vue({
  render: h => h(App),
}).$mount('#app');

然后，你可以在任何组件中使用 EventBus 来触发和监听事件：

// 组件 A
<script>
import { EventBus } from './main.js';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from Component A');
    }
  }
}
</script>

// 组件 B
<script>
import { EventBus } from './main.js';
export default {
  created() {
    EventBus.$on('message', message => {
      console.log(message); // 'Hello from Component A'
    });
  }
}
</script>

3. 消息的订阅与发布 (Vuex)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。你可以通过 Vuex 在组件之间传递数据。Vuex 的核心概念是 state、mutations、actions 和 getters。其中，mutations 用于更改 state，actions 用于提交 mutation，并可以包含任意异步操作。getters 用于从 state 中派生出一些状态。具体的使用方式如下：
首先，你需要在你的项目中安装并配置 Vuex：
然后，你可以在任何组件中使用 this.$store.state 来访问状态，使用 this.$store.commit 来提交 mutation，使用 this.$store.dispatch 来分发 action。例如：在一个组件中更改状态并在另一个组件中响应这个更改。在 Vuex 中，状态的更改必须通过 mutation。每个 mutation 都有一个字符串的事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。我们不能直接改变 state 中的状态，必须显式地返回一个新的状态。具体代码如下：首先定义一个 mutation：然后在一个组件中提交这个 mutation：在另一个组件中监听状态的变化并做出响应：使用 Vuex 可以让我们的应用更加的可预测和可维护。以上就是在 Vue 中实现组件间传值的几种方法。需要注意的是，选择合适的方法对于保持代码的可读性和可维护性至关重要。

下面是一个简单的 Vuex 实现消息订阅与发布的例子：

首先，你需要安装 Vuex。你可以通过 npm 安装：

npm install vuex --save

然后，你需要在你的 Vue 应用中引入并使用 Vuex。在你的 main.js 文件中：

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    sendMessage({ commit }, message) {
      commit('setMessage', message)
    }
  },
  getters: {
    message: state => state.message
  }
})

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

在这个例子中，我们创建了一个 Vuex store，它有一个状态 message，一个 mutation setMessage，一个 action sendMessage，和一个 getter message。状态 message 用来存储我们的消息，mutation setMessage 用来更改状态，action sendMessage 用来提交 mutation，getter message 用来从状态中获取消息。

现在，你可以在任何组件中发布和订阅消息。例如：

在一个组件中发布消息：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$store.dispatch('sendMessage', 'Hello from Component A')
    }
  }
}
</script>

在另一个组件中订阅消息：

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

<script>
export default {
  computed: {
    message() {
      return this.$store.getters.message;
    }
  },
  watch: {
    // 监听 message 的变化，当 message 变化时执行一些操作
    message(newVal, oldVal) {
      console.log('Message changed from', oldVal, 'to', newVal);
    }
  },
  created() {
    console.log('Initial message:', this.message); // 'Hello from Component A'
  },
};
</script>