快捷導航

vue中組件傳值的常見方式小結(jié)

更新時間：2023年12月11日 15:20:16 作者：一花一world

在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個常見的需求,Vue 提供了多種方法來實現(xiàn)這一目標,包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來學習一下這些方法的具體實現(xiàn)吧

1.Props

Props 是 Vue 組件之間傳遞數(shù)據(jù)的基礎(chǔ)方式。父組件可以通過 props 將數(shù)據(jù)傳遞給子組件。

// 父組件
<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 實例實現(xiàn)了一個事件接口，你可以使用它來創(chuàng)建自定義事件。全局事件總線是一種在組件之間傳遞數(shù)據(jù)的模式，但它不是 Vue 的官方推薦方式，因為它可能會使得代碼的邏輯復雜化和難以維護。但在某些場景下，它仍然是一個有用的工具。

首先，你需要在你的 main.js 文件中創(chuàng)建一個全局的 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 來觸發(fā)和監(jiān)聽事件：

// 組件 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.消息的訂閱與發(fā)布 (Vuex)

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。你可以通過 Vuex 在組件之間傳遞數(shù)據(jù)。Vuex 的核心概念是 state、mutations、actions 和 getters。其中，mutations 用于更改 state，actions 用于提交 mutation，并可以包含任意異步操作。getters 用于從 state 中派生出一些狀態(tài)。具體的使用方式如下：

首先，你需要在你的項目中安裝并配置 Vuex：

然后，你可以在任何組件中使用 this.$store.state 來訪問狀態(tài)，使用 this.$store.commit 來提交 mutation，使用 this.$store.dispatch 來分發(fā) action。例如：在一個組件中更改狀態(tài)并在另一個組件中響應(yīng)這個更改。在 Vuex 中，狀態(tài)的更改必須通過 mutation。每個 mutation 都有一個字符串的事件類型和一個回調(diào)函數(shù)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。我們不能直接改變 state 中的狀態(tài)，必須顯式地返回一個新的狀態(tài)。具體代碼如下：首先定義一個 mutation：然后在一個組件中提交這個 mutation：在另一個組件中監(jiān)聽狀態(tài)的變化并做出響應(yīng)：使用 Vuex 可以讓我們的應(yīng)用更加的可預測和可維護。以上就是在 Vue 中實現(xiàn)組件間傳值的幾種方法。需要注意的是，選擇合適的方法對于保持代碼的可讀性和可維護性至關(guān)重要。

下面是一個簡單的 Vuex 實現(xiàn)消息訂閱與發(fā)布的例子：

首先，你需要安裝 Vuex。你可以通過 npm 安裝：

npm install vuex --save

然后，你需要在你的 Vue 應(yīng)用中引入并使用 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')

在這個例子中，我們創(chuàng)建了一個 Vuex store，它有一個狀態(tài) message，一個 mutation setMessage，一個 action sendMessage，和一個 getter message。狀態(tài) message 用來存儲我們的消息，mutation setMessage 用來更改狀態(tài)，action sendMessage 用來提交 mutation，getter message 用來從狀態(tài)中獲取消息。

現(xiàn)在，你可以在任何組件中發(fā)布和訂閱消息。例如：

在一個組件中發(fā)布消息：

<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: {
    // 監(jiān)聽 message 的變化，當 message 變化時執(zhí)行一些操作
    message(newVal, oldVal) {
      console.log('Message changed from', oldVal, 'to', newVal);
    }
  },
  created() {
    console.log('Initial message:', this.message); // 'Hello from Component A'
  },
};
</script>

到此這篇關(guān)于vue中組件傳值的常見方式小結(jié)的文章就介紹到這了,更多相關(guān)vue組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: