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

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

代碼示例：

在父組件中，可以這樣傳遞數(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選項(xiàng)中聲明message屬性，并使用這個(gè)屬性：

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

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

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

代碼示例：

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

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

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

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

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

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

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

代碼示例：

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

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

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

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

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

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

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

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

四、組件間通信-v-model

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

代碼示例：

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

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

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

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

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

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

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

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

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

代碼示例：

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

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

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

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

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

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

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

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

$attrs屬性是一個(gè)對象，包含了父組件傳遞給子組件但在子組件中未被聲明的屬性。可以通過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屬性是一個(gè)對象，包含了父組件綁定在當(dāng)前組件上的所有事件監(jiān)聽器?？梢酝ㄟ^v-on="$listeners"將這些事件監(jiān)聽器綁定到子組件內(nèi)部的DOM元素或其他組件上。例如：

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

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

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

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

在Vue組件開發(fā)中，$children和$parent是兩個(gè)特殊的屬性，可以用于實(shí)現(xiàn)組件之間的通信。但需要注意的是，使用這些屬性并不是Vue官方推薦的通信方式，因?yàn)樗鼈兙哂幸欢ǖ木窒扌院惋L(fēng)險(xiǎn)，容易引起耦合和不可預(yù)測的問題。

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

代碼示例：

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

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

$parent屬性是當(dāng)前組件的父組件實(shí)例。可以通過$parent屬性訪問父組件的屬性和方法。例如：

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

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

八、組件間通信-provide與inject

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

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

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

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

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

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

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

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

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

九、組件間通信-vuex

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

Vuex包含了以下幾個(gè)核心概念：

• state: 存儲應(yīng)用程序狀態(tài)的對象，也就是所有組件共享的數(shù)據(jù)。
• mutations: 用于修改state的方法，必須是同步函數(shù)，可以記錄所有修改state的操作。
• actions: 用于處理異步操作和復(fù)雜的邏輯，可以包含多個(gè)mutation。
• getters: 類似于Vue組件中的計(jì)算屬性，可以通過state派生出一些新的狀態(tài)，以便在多個(gè)組件中共享。

下面是一個(gè)簡單的Vuex示例，以計(jì)數(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在處理大型應(yīng)用程序時(shí)非常有用，但在處理小型應(yīng)用程序時(shí)，可能會增加額外的復(fù)雜性和開銷。因此，當(dāng)應(yīng)用程序比較簡單時(shí)，可以選擇其他的組件通信方式，例如props、事件總線、自定義事件等。

到此這篇關(guān)于Vue組件間通信方式全面匯總介紹的文章就介紹到這了,更多相關(guān)Vue通信方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論