Vue3組件間怎麼通訊？ 10+種通訊方式分享-Vue.js-PHP中文網

首頁

web前端

Vue.js

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

青灯夜游

Feb 28, 2022 pm 07:40 PM

vue3組件通訊

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

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

本文講解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

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

收藏(學到)是自己的！

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，它具備完整的推論並且在

熱AI工具

熱工具

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中