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

发布时间:2023年12月17日

在 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>
  1. 全局事件总线

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>
  1. 消息的订阅与发布 (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>
文章来源:https://blog.csdn.net/ACCPluzhiqi/article/details/134923751
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。