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
建議讀者跟著本文敲一次程式碼，然後根據本文給出的連結去深挖各個知識點。
收藏(學到)是自己的！Props
#父元件https:/ /v3.cn.vuejs.org/guide/component-props.html
##// Parent.vue
<template>
<!-- 使用子组件 -->
<Child :msg="message" />
</template>
<script setup>
import Child from './components/Child.vue' // 引入子组件
let message = '雷猴'
</script>
子元件
// Child.vue
<template>
<div>
{{ msg }}
</div>
</template>
<script setup>
const props = defineProps({
msg: {
type: String,
default: ''
}
})
console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props
</script>defineProps API 來宣告props，它具備完整的推論並且在<script setup> 中是直接可用的。 更多細節請看
。https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-和-defineemits
在
作者最新文章
