Vue組件間通信方式有哪些

本篇內(nèi)容主要講解“Vue組件間通信方式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue組件間通信方式有哪些”吧!

一、組件間通信最基本方式-props

props是在父組件中傳遞給子組件的數(shù)據(jù)，子組件可以通過props接收這些數(shù)據(jù)并進行渲染或操作。在父組件中，通過在子組件標簽上綁定屬性并傳遞相應的值來傳遞數(shù)據(jù)。在子組件中，需要在props選項中聲明接收哪些屬性，并在組件中使用這些屬性。

代碼示例：

在父組件中，可以這樣傳遞數(shù)據(jù)給子組件：

<template>
  <child-component :message="message" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

在子組件中，需要在props選項中聲明message屬性，并使用這個屬性：

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

二、組件間通信-vue自定義事件

除了通過props進行父子組件之間的通信，Vue還提供了一種更加靈活的組件間通信方式，即自定義事件。通過自定義事件，可以讓子組件向父組件發(fā)送消息，也可以讓任意兩個組件之間進行通信。自定義事件的實現(xiàn)依賴于Vue實例中的事件系統(tǒng)，即$emit和$on方法。在子組件中，使用$emit方法觸發(fā)一個自定義事件，并傳遞需要傳遞的數(shù)據(jù)。在父組件中，使用$on方法監(jiān)聽這個自定義事件，并在回調(diào)函數(shù)中獲取傳遞的數(shù)據(jù)。

代碼示例：

在子組件中，可以這樣觸發(fā)一個自定義事件：

<template>
  <button @click="sendMessage">發(fā)送消息</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World!');
    }
  }
}
</script>

在父組件中，可以這樣監(jiān)聽這個自定義事件：

<template>
  <child-component @message="handleMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
}
</script>

三、組件間通信-事件總線

事件總線是一個Vue實例，可以用來在任意兩個組件之間進行通信。事件總線可以通過Vue的全局事件機制來實現(xiàn)，即使用$emit方法觸發(fā)一個全局事件，然后在需要監(jiān)聽這個事件的組件中使用$on方法進行監(jiān)聽。

在Vue應用程序中，可以創(chuàng)建一個全局事件總線，使得所有組件都可以通過這個事件總線進行通信。

代碼示例：

可以在一個單獨的JavaScript文件中創(chuàng)建一個全局事件總線：

import Vue from 'vue';
export const eventBus = new Vue();

然后，在任意需要進行通信的組件中，可以使用事件總線來發(fā)送和接收消息。

在組件A中，可以使用事件總線來發(fā)送一個消息：

import { eventBus } from './event-bus.js';
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello World!');
    }
  }
}

在組件B中，可以使用事件總線來監(jiān)聽這個消息：

import { eventBus } from './event-bus.js';
export default {
  created() {
    eventBus.$on('message', message => {
      console.log(message);
    });
  }
}

這樣，組件A就可以向組件B發(fā)送消息，并且組件B可以在監(jiān)聽到這個消息后進行相應的操作。需要注意的是，事件總線是一個全局實例，因此在多人開發(fā)的情況下，可能會出現(xiàn)命名沖突的問題?？梢栽诿录偩€實例時加上項目前綴來避免這個問題。

四、組件間通信-v-model

v-model是Vue提供的一個用于雙向綁定的指令，它可以方便地在父組件和子組件之間進行雙向數(shù)據(jù)綁定。通常情況下，在一個子組件中使用v-model指令時，它會自動將value作為prop和input事件綁定。父組件可以通過v-model指令來將子組件中的value屬性綁定到父組件中的一個變量上，并且當父組件中的這個變量發(fā)生變化時，子組件中的value屬性也會相應地更新。

代碼示例：

在一個簡單的自定義輸入框組件中，可以這樣定義v-model：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  props: ['value']
}
</script>

這個組件接收一個value屬性，并在輸入框中將這個屬性作為輸入框的值。在輸入框中輸入內(nèi)容時，它會觸發(fā)一個input事件，并將輸入框中的值作為參數(shù)傳遞給父組件。父組件可以通過v-model指令來將這個value屬性與父組件中的一個變量進行綁定：

<template>
  <custom-input v-model="message" />
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在這個例子中，父組件中的message變量會與子組件中的value屬性進行雙向綁定，因此當在子組件中輸入內(nèi)容時，父組件中的message變量也會相應地更新。同時，當父組件中的message變量發(fā)生變化時，子組件中的value屬性也會相應地更新。

需要注意的是，v-model實際上是語法糖，它只是將組件的prop和事件進行了簡寫。如果需要更細粒度的控制，也可以手動綁定prop和事件來進行雙向綁定。

五、組件間通信-sync屬性修飾符

sync是Vue提供的一個屬性修飾符，它可以方便地實現(xiàn)子組件向父組件傳遞數(shù)據(jù)并保持同步更新。它實際上是一種簡寫形式，用于簡化使用v-bind和$emit手動實現(xiàn)雙向綁定的代碼量。

sync屬性修飾符可以被用于一個子組件的props上，表示將父組件中的一個變量與該prop進行雙向綁定。在子組件中，sync屬性修飾符會自動將該prop作為一個update事件發(fā)送回父組件，以便父組件能夠相應地更新變量的值。

代碼示例：

在一個簡單的自定義輸入框組件中，可以使用sync屬性修飾符來將輸入框中的值與父組件中的一個變量進行雙向綁定：

<template>
  <input :value="value" @input="$emit('update:value', $event.target.value)">
</template>
<script>
export default {
  props: ['value']
}
</script>

這個組件接收一個value屬性，并在輸入框中將這個屬性作為輸入框的值。在輸入框中輸入內(nèi)容時，它會觸發(fā)一個input事件，并將輸入框中的值作為參數(shù)傳遞給父組件。通過使用sync屬性修飾符，可以在父組件中將這個value屬性與一個變量進行雙向綁定：

<template>
  <custom-input :value.sync="message" />
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在這個例子中，sync屬性修飾符會自動將子組件中的value屬性與父組件中的message變量進行雙向綁定。當在子組件中輸入內(nèi)容時，會觸發(fā)一個update:value事件，將輸入框中的值作為參數(shù)傳遞給父組件中的message變量。同時，當父組件中的message變量發(fā)生變化時，也會自動更新子組件中的value屬性。

需要注意的是，sync屬性修飾符僅僅是一種語法糖，它實際上是使用v-bind和$emit手動實現(xiàn)雙向綁定的簡寫形式。如果需要更細粒度的控制，也可以手動綁定prop和事件來進行雙向綁定。

六、組件間通信-$attrs與$listeners

在Vue組件開發(fā)中，有時候需要在組件之間傳遞一些未被聲明為prop的數(shù)據(jù)或監(jiān)聽父組件的事件，這時候可以使用Vue提供的$attrs和$listeners特殊屬性來實現(xiàn)。

$attrs屬性是一個對象，包含了父組件傳遞給子組件但在子組件中未被聲明的屬性?？梢酝ㄟ^v-bind="$attrs"將這些屬性傳遞給子組件內(nèi)部的DOM元素或其他組件。

代碼示例：

<template>
  <div>
    <input v-bind="$attrs" />
    <!-- 或者 -->
    <custom-component v-bind="$attrs" />
  </div>
</template>
<script>
export default {
  inheritAttrs: false // 禁用特性繼承
}
</script>

需要注意的是，如果組件繼承了父組件的特性，例如class、style等，那么這些特性也會被包含在$attrs屬性中，需要通過將inheritAttrs設(shè)置為false來禁用特性繼承。

$listeners屬性是一個對象，包含了父組件綁定在當前組件上的所有事件監(jiān)聽器?？梢酝ㄟ^v-on="$listeners"將這些事件監(jiān)聽器綁定到子組件內(nèi)部的DOM元素或其他組件上。例如：

<template>
  <div v-on="$listeners">
    <input />
    <!-- 或者 -->
    <custom-component v-on="$listeners" />
  </div>
</template>

需要注意的是，當使用$listeners屬性時，只有自定義事件才會被綁定到子組件內(nèi)部的DOM元素或其他組件上，原生事件不會。因此，如果需要監(jiān)聽原生事件，還需要手動將事件綁定到相應的DOM元素或組件上。

使用$attrs和$listeners可以方便地實現(xiàn)組件之間的通信，同時也能保證組件的封裝性和復用性。

七、組件間通信-$children與$parent

在Vue組件開發(fā)中，$children和$parent是兩個特殊的屬性，可以用于實現(xiàn)組件之間的通信。但需要注意的是，使用這些屬性并不是Vue官方推薦的通信方式，因為它們具有一定的局限性和風險，容易引起耦合和不可預測的問題。

$children屬性是一個數(shù)組，包含了當前組件的所有子組件實例?？梢酝ㄟ^遍歷$children數(shù)組來訪問子組件的屬性和方法。

代碼示例：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 訪問子組件實例的屬性和方法
    console.log(this.$children[0].childProp)
    this.$children[0].childMethod()
    // 通過ref訪問子組件實例
    console.log(this.$refs.child.childProp)
    this.$refs.child.childMethod()
  }
}
</script>

需要注意的是，$children數(shù)組是不穩(wěn)定的，它的順序可能會受到組件渲染順序的影響。因此，不建議在$children數(shù)組中使用索引來訪問子組件，而應該通過ref屬性來訪問子組件實例。

$parent屬性是當前組件的父組件實例?？梢酝ㄟ^$parent屬性訪問父組件的屬性和方法。例如：

<template>
  <div>
    <button v-on:click="parentMethod">調(diào)用父組件方法</button>
  </div>
</template>
<script>
export default {
  methods: {
    parentMethod() {
      // 訪問父組件實例的屬性和方法
      console.log(this.$parent.parentProp)
      this.$parent.parentMethod()
    }
  }
}
</script>

需要注意的是，$parent屬性只能訪問當前組件的直接父組件實例，不能訪問更高層次的父組件實例。因此，如果需要在嵌套層次較深的組件之間通信，建議使用Vuex或事件總線等官方推薦的通信方式。

八、組件間通信-provide與inject

Vue提供了一種比較高級的組件通信方式——provide和inject，它可以實現(xiàn)祖先組件向后代組件傳遞數(shù)據(jù)，而無需一層層地傳遞props或者事件。

provide和inject是Vue中兩個成對出現(xiàn)的選項，provide選項用于向后代組件提供數(shù)據(jù)，而inject選項用于在后代組件中注入數(shù)據(jù)。需要注意的是，只有通過inject選項注入的數(shù)據(jù)才是響應式的，而通過props傳遞的數(shù)據(jù)是只讀的。

在父組件中使用provide選項提供數(shù)據(jù)，例如：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
export default {
  provide: {
    message: 'hello world'
  }
}
</script>

在子組件中使用inject選項注入數(shù)據(jù)，例如：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

在子組件中使用inject選項注入數(shù)據(jù)時，可以將其定義為一個數(shù)組，數(shù)組的每個元素是需要注入的數(shù)據(jù)的key值。例如：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message', 'otherData']
}
</script>

需要注意的是，provide和inject選項主要用于高階組件庫和插件開發(fā)，一般情況下不推薦在業(yè)務組件中使用，因為它會增加組件之間的耦合性，并且不太符合Vue的“單向數(shù)據(jù)流”思想。如果需要在業(yè)務組件中實現(xiàn)組件之間的通信，建議使用Vuex或事件總線等官方推薦的通信方式。

九、組件間通信-vuex

Vuex是Vue的官方狀態(tài)管理庫，它提供了一種集中式存儲管理應用所有組件的狀態(tài)的方法。通過Vuex，我們可以將應用程序的狀態(tài)從組件中提取出來，集中在一個容器中進行管理，使得組件之間的數(shù)據(jù)共享更加簡單可控。

Vuex包含了以下幾個核心概念：

• state: 存儲應用程序狀態(tài)的對象，也就是所有組件共享的數(shù)據(jù)。

• mutations: 用于修改state的方法，必須是同步函數(shù)，可以記錄所有修改state的操作。

• actions: 用于處理異步操作和復雜的邏輯，可以包含多個mutation。

• getters: 類似于Vue組件中的計算屬性，可以通過state派生出一些新的狀態(tài)，以便在多個組件中共享。

下面是一個簡單的Vuex示例，以計數(shù)器為例：

在store.js中定義Vuex的store：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count: 0
}
const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}
const actions = {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}
const getters = {
  doubleCount (state) {
    return state.count * 2
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

在App.vue組件中使用store中的數(shù)據(jù)：

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <p>Double Count: {{ $store.getters.doubleCount }}</p>
    <button @click="$store.commit('increment')">Increment</button>
    <button @click="$store.commit('decrement')">Decrement</button>
    <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count
  })
}
</script>

在子組件中也可以使用Vuex中的數(shù)據(jù)和方法，例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count
  })
}
</script>

需要注意的是，Vuex在處理大型應用程序時非常有用，但在處理小型應用程序時，可能會增加額外的復雜性和開銷。因此，當應用程序比較簡單時，可以選擇其他的組件通信方式，例如props、事件總線、自定義事件等。

到此，相信大家對“Vue組件間通信方式有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！