Vue 組件間通訊的六種方式

Vue 是一個流行的 JavaScript 框架，用於建立單頁應用程式。在 Vue 中，元件是建立應用程式的基本單位，元件是用於顯示和處理資料的可重複使用程式碼區塊。元件通訊是元件之間資料傳遞和互動的核心機制之一。在本文中，我們將探討六種組件通訊方式。

一、Props 和 Events

Props 和 Events 是 Vue 中最基本的元件通訊方式。透過 props，父元件向子元件傳遞資料。而子元件則透過 events 建構函式向父元件發送資料。這種通訊方式的特徵是單向傳遞。

父元件透過props 將資料傳遞給子元件：

<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

在子元件中，需要宣告props，並使用props 接收來自父元件的資料：

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

然後，子元件透過events 發送資料給父元件：

<template>
  <button @click="updateParentMessage">Update Parent Message</button>
</template>
<script>
  export default {
    methods: {
      updateParentMessage() {
        this.$emit('update-message', 'this is child');
      }
    }
  }
</script>

在父元件中，需要為子元件監聽events，在事件監聽函式中接收來自子元件的資料：

<template>
  <child-component :message="parentMessage" @update-message="updateMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    },
    methods: {
      updateMessage(message) {
        this.parentMessage = message;
      }
    }
  }
</script>

二、Vuex

Vuex 是Vue 中用於狀態管理的一個官方外掛程式。 Vuex 實作了一個全域的狀態管理模式。它透過 store 集中管理應用程式的所有元件的狀態。當多個元件共用狀態時，使用 Vuex 可以更方便地管理元件之間的資料交換和通訊。

首先，我們需要建立一個Vuex store：

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'hello world'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('updateMessage', message)
    }
  },
  getters: {
    getMessage: state => state.message
  }
})

export default store

在元件中，我們可以使用$store 存取store 中的狀態，使用commit 方法來提交mutations 來修改狀態：

<template>
  <div>{{ this.$store.getters.getMessage }}</div>
  <button @click="updateMessage">Update Message</button>
</template>
<script>
  export default {
    methods: {
      updateMessage() {
        this.$store.dispatch('updateMessage', 'hello vuex')
      }
    }
  }
</script>

三、$parent 和$children

Vue 中的每個元件都具有$parent 和$children 屬性。 $parent 屬性指向元件的父元件，$children 屬性指向元件的子元件。透過 $parent 和 $children 屬性，元件可以直接存取父元件和子元件的資料和方法。

例如，父元件可以透過$children 屬性存取子元件的資料和方法：

<template>
  <div>
    {{ $children[0].message }}
    <button @click="$children[0].updateMessage">Update message</button>
  </div>
</template>

在子元件中，需要定義message 和updateMessage 方法：

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

四、$refs

Vue 中的每個元件都具有$refs 屬性。 $refs 屬性是一個對象，包含了在元件中使用 ref 屬性命名的子元件或 DOM 元素的參考。透過 $refs 屬性，元件之間可以相互引用和呼叫。

例如，我們可以在父元件中透過ref 屬性取得子元件的參考：

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="updateMessage">Update message</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      updateMessage() {
        this.$refs.childComponent.updateMessage()
      }
    }
  }
</script>

在子元件中，我們需要定義updateMessage 方法：

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

五、 Event Bus

Event Bus 是一種廣泛使用的中央事件系統，可在Vue 元件之間有效地傳遞事件。 Event Bus 是一個簡單的 Vue 實例，可以透過 $emit 方法向其他 Vue 元件傳送事件，也可以透過 $on 方法接收其他 Vue 元件所傳送的事件。

在實作Event Bus 時，我們需要建立一個新的Vue 實例：

import Vue from 'vue'

const bus = new Vue()

export default bus

然後，我們可以在元件中引入Event Bus 並使用$emit 發送事件，使用$on 接收事件：

// 发送事件
import Bus from './Bus.js'

Bus.$emit('event-name', data)

// 接收事件
import Bus from './Bus.js'

Bus.$on('event-name', (data) => {
  console.log(data)
})

六、Provide 和Inject

Vue 2.2 中新增的Provide 和Inject 是一種高階的元件通訊方式。 Provide 和 Inject 讓父元件將資料傳遞給所有後代元件，而不是只傳遞給直接子元件。 Provide 和 Inject 是一種不同於 props、events 和 $parent/$children 的元件通訊形式，是一種更靈活和封裝性更強的通訊方式。

父元件透過provide 提供資料：

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

在子元件中，我們需要定義inject 接收父元件傳遞的資料：

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

這就是六種Vue 元件通信方式的介紹。不同的應用場景需要採用不同的元件通訊方式。掌握這些通訊方式可以讓 Vue 元件的開發更有效率、簡單、更靈活。

以上是Vue 組件間通訊的六種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！