Vue3常用的通訊方式有哪些

Vue3常用的通訊方式有哪些

在Vue3中，組件之間的通訊是開發中非常重要的一部分。Vue3提供了多種通訊方式，開發者可以根據不同的場景選擇合適的方式來實現組件之間的數據傳遞和交互。本文將介紹Vue3中常用的幾種通訊方式。

1. Props 和 Events

Props

Props 是父組件向子組件傳遞數據的主要方式。父組件通過 props 將數據傳遞給子組件，子組件通過 props 接收數據。

<!-- 父組件 -->
<template>
  <ChildComponent :message="parentMessage" />
</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: {
      type: String,
      required: true
    }
  }
};
</script>

Events

子組件可以通過 $emit 方法觸發事件，父組件通過監聽這些事件來響應子組件的動作。

<!-- 子組件 -->
<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('notify', 'Hello from Child');
    }
  }
};
</script>

<!-- 父組件 -->
<template>
  <ChildComponent @notify="handleNotify" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleNotify(message) {
      console.log(message); // 輸出: Hello from Child
    }
  }
};
</script>

2. Provide 和 Inject

Provide 和 Inject 是Vue3中用于跨層級組件通訊的一種方式。父組件通過 provide 提供數據，子組件通過 inject 注入數據。

<!-- 父組件 -->
<template>
  <ChildComponent />
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    provide('message', 'Hello from Parent');
  }
};
</script>

<!-- 子組件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    return {
      message
    };
  }
};
</script>

3. Vuex

Vuex 是Vue的官方狀態管理庫，適用于大型應用中的全局狀態管理。通過 Vuex，多個組件可以共享和響應同一個狀態。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

<!-- 父組件 -->
<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

4. Event Bus

Event Bus 是一種基于事件的通訊方式，適用于小型應用或不需要復雜狀態管理的場景。通過創建一個全局的 Vue 實例作為事件總線，組件可以通過 $on 和 $emit 進行通訊。

// eventBus.js
import { createApp } from 'vue';

export const eventBus = createApp({});

<!-- 組件A -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { eventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message', 'Hello from Component A');
    }
  }
};
</script>

<!-- 組件B -->
<template>
  <div>{{ message }}</div>
</template>

<script>
import { eventBus } from './eventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    eventBus.$on('message', (message) => {
      this.message = message;
    });
  }
};
</script>

5. Refs 和 Reactive

在Vue3中，ref 和 reactive 是用于創建響應式數據的兩種方式。通過 ref 和 reactive，可以在組件之間共享響應式數據。

<!-- 父組件 -->
<template>
  <ChildComponent :sharedData="sharedData" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const sharedData = ref('Hello from Parent');
    return {
      sharedData
    };
  }
};
</script>

<!-- 子組件 -->
<template>
  <div>{{ sharedData }}</div>
</template>

<script>
export default {
  props: {
    sharedData: {
      type: String,
      required: true
    }
  }
};
</script>

6. 自定義事件

除了 $emit 和 $on，Vue3還支持通過 v-model 和 .sync 修飾符來實現自定義事件的雙向綁定。

<!-- 父組件 -->
<template>
  <ChildComponent v-model:message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

<!-- 子組件 -->
<template>
  <input :value="message" @input="updateMessage" />
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    updateMessage(event) {
      this.$emit('update:message', event.target.value);
    }
  }
};
</script>

總結

Vue3提供了多種組件通訊方式，開發者可以根據具體的應用場景選擇合適的方式。Props 和 Events 是最常用的父子組件通訊方式，Provide 和 Inject 適用于跨層級組件通訊，Vuex 適用于全局狀態管理，Event Bus 適用于小型應用，Refs 和 Reactive 則提供了更靈活的響應式數據管理方式。通過合理使用這些通訊方式，可以有效地組織和管理組件之間的數據流。