Vue3組件間怎麼通訊？ 10+種通訊方式分享

Vue元件間怎麼通訊？以下這篇文章跟大家分享十多種Vue3元件通訊方式，希望對大家有幫助！

本文講解Vue 3.2 元件多種通訊方式的基礎用法，並且使用了 單一檔案元件<script setup> 。 </script>

眾所周知，Vue.js 中一個很重要的知識點是元件通信，不管是業務類別的開發還是元件庫開發，都有各自的通訊方法。 【相關推薦：vuejs影片教學】

本文適合：

• 有 Vue 3 基礎的讀者。

• 打算開發元件庫的讀者。

本文會涉及的知識點：

• #Props

• emits

• expose / ref

• Non-Props

• v-model

• 插槽slot

• provide / inject

• #匯流排bus

• #getCurrentInstance

• Vuex

• Pinia

• #mitt.js

##我會將上面羅列的知識點都寫一個簡單的demo。本文的目的是要讓大家知道有這些方法可以用，所以不會深入研究每個知識點。

建議讀者跟著本文敲一次程式碼，然後根據本文給出的連結去深挖各個知識點。

收藏(學到)是自己的！

Props

父元件傳值給子元件（簡稱：父傳子）

Props 文件

https:/ /v3.cn.vuejs.org/guide/component-props.html

#父元件

##

// Parent.vue

<template>
  <!-- 使用子组件 -->
  <Child :msg="message" />
</template>

<script setup>
import Child from &#39;./components/Child.vue&#39; // 引入子组件

let message = &#39;雷猴&#39;
</script>

子元件

// Child.vue

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script setup>

const props = defineProps({
  msg: {
    type: String,
    default: &#39;&#39;
  }
})

console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props

</script>

在<script setup></script>

中必須使用

defineProps API 來宣告props，它具備完整的推論並且在