溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue3中組件通訊的方法有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue3中組件通訊的方法有哪些”吧！
父組件傳值給子組件（簡稱：父傳子）
Props 文檔
父組件
// 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>在 <script setup> 中必須使用 defineProps API 來聲明 props，它具備完整的推斷并且在 <script setup> 中是直接可用的。
更多細節請看 文檔。
在 <script setup> 中，defineProps 不需要另外引入。
props 其實還能做很多事情，比如：設置默認值 default ，類型驗證 type ，要求必傳 required ，自定義驗證函數 validator 等等。
大家可以去官網看看，這是必須掌握的知識點！
props 文檔
子組件通知父組件觸發一個事件，并且可以傳值給父組件。（簡稱：子傳父）
emits 文檔
父組件
// Parent.vue
<template>
<div>父組件：{{ message }}</div>
<!-- 自定義 changeMsg 事件 -->
<Child @changeMsg="changeMessage" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'
let message = ref('雷猴')
// 更改 message 的值，data是從子組件傳過來的
function changeMessage(data) {
message.value = data
}
</script>子組件
// Child.vue
<template>
<div>
子組件：<button @click="handleClick">子組件的按鈕</button>
</div>
</template>
<script setup>
// 注冊一個自定義事件名，向上傳遞時告訴父組件要觸發的事件。
const emit = defineEmits(['changeMsg'])
function handleClick() {
// 參數1：事件名
// 參數2：傳給父組件的值
emit('changeMsg', '鯊魚辣椒')
}
</script>和 props 一樣，在 <script setup> 中必須使用 defineEmits API 來聲明 emits，它具備完整的推斷并且在 <script setup> 中是直接可用的。更多細節請看 文檔。
在 <script setup> 中，defineEmits 不需要另外引入。
子組件可以通過 expose 暴露自身的方法和數據。
父組件通過 ref 獲取到子組件并調用其方法或訪問數據。
expose 文檔
用例子說話
父組件
// Parent.vue
<template>
<div>父組件：拿到子組件的message數據：{{ msg }}</div>
<button @click="callChildFn">調用子組件的方法</button>
<hr>
<Child ref="com" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Child from './components/Child.vue'
const com = ref(null) // 通過 模板ref 綁定子組件
const msg = ref('')
onMounted(() => {
// 在加載完成后，將子組件的 message 賦值給 msg
msg.value = com.value.message
})
function callChildFn() {
// 調用子組件的 changeMessage 方法
com.value.changeMessage('蒜頭王八')
// 重新將 子組件的message 賦值給 msg
msg.value = com.value.message
}
</script>子組件
// Child.vue
<template>
<div>子組件：{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('蟑螂惡霸')
function changeMessage(data) {
message.value = data
}
使用 defineExpose 向外暴露指定的數據和方法
defineExpose({
message,
changeMessage
})
</script>在 <script setup> 中，defineExpose 不需要另外引入。
expose 文檔
defineExpose 文檔
所謂的 Non-Props 就是 非 Prop 的 Attribute。
意思是在子組件中，沒使用 prop 或 emits 定義的 attribute，可以通過 $attrs 來訪問。
常見的有 class 、style 和 id。
非 Prop 的 Attribute 文檔
還是舉個例子會直觀點
父組件
// Parent.vue
<template>
<Child msg="雷猴 世界！" name="鯊魚辣椒" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'
</script>子組件
// Child.vue <template> <div>子組件：打開控制臺看看</div> </template>
打開控制臺可以看到，屬性被掛到 HTML 元素上了。
但在 Vue3 中，組件已經沒規定只能有一個根元素了。如果子組件是多個元素時，上面的例子就不生效了。
// Child.vue <template> <div>子組件：打開控制臺看看</div> <div>子組件：打開控制臺看看</div> </template>
此時可以使用 $attrs 的方式進行綁定。
// Child.vue <template> <div :message="$attrs.msg">只綁定指定值</div> <div v-bind="$attrs">全綁定</div> </template>
v-model 是 Vue 的一個語法糖。在 Vue3 中的玩法就更多(暈)了。
組件上的 v-model 使用 modelValue 作為 prop 和 update:modelValue 作為事件。
v-model 參數文檔
父組件
// Parent.vue
<template>
<Child v-model="message" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'
const message = ref('雷猴')
</script>子組件
// Child.vue
<template>
<div @click="handleClick">{{modelValue}}</div>
</template>
<script setup>
import { ref } from 'vue'
// 接收
const props = defineProps([
'modelValue' // 接收父組件使用 v-model 傳進來的值，必須用 modelValue 這個名字來接收
])
const emit = defineEmits(['update:modelValue']) // 必須用 update:modelValue 這個名字來通知父組件修改值
function handleClick() {
// 參數1：通知父組件修改值的方法名
// 參數2：要修改的值
emit('update:modelValue', '噴射河馬')
}
</script>
你也可以這樣寫，更加簡單
子組件
// Child.vue
<template>
<div @click="$emit('update:modelValue', '噴射河馬')">{{modelValue}}</div>
</template>
<script setup>
import { ref } from 'vue'
// 接收
const props = defineProps([
'modelValue' // 接收父組件使用 v-model 傳進來的值，必須用 modelValue 這個名字來接收
])
</script>多個 v-model 綁定 文檔
父組件
// Parent.vue
<template>
<Child v-model:msg1="message1" v-model:msg2="message2" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'
const message1 = ref('雷猴')
const message2 = ref('蟑螂惡霸')
</script>子組件
// Child.vue
<template>
<div><button @click="changeMsg1">修改msg1</button> {{msg1}}</div>
<div><button @click="changeMsg2">修改msg2</button> {{msg2}}</div>
</template>
<script setup>
import { ref } from 'vue'
// 接收
const props = defineProps({
msg1: String,
msg2: String
})
const emit = defineEmits(['update:msg1', 'update:msg2'])
function changeMsg1() {
emit('update:msg1', '鯊魚辣椒')
}
function changeMsg2() {
emit('update:msg2', '蝎子萊萊')
}
</script>
v-model 還能通過 . 的方式傳入修飾。
v-model 修飾符 文檔
父組件
// Parent.vue
<template>
<Child v-model.uppercase="message" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'
const message = ref('hello')
</script>子組件
// Child.vue
<template>
<div>{{modelValue}}</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps([
'modelValue',
'modelModifiers'
])
const emit = defineEmits(['update:modelValue'])
onMounted(() => {
// 判斷有沒有 uppercase 修飾符，有的話就執行 toUpperCase() 方法
if (props.modelModifiers.uppercase) {
emit('update:modelValue', props.modelValue.toUpperCase())
}
})
</script>
插槽可以理解為傳一段 HTML 片段給子組件。子組件將 <slot> 元素作為承載分發內容的出口。
插槽 文檔
本文打算講講日常用得比較多的3種插槽：默認插槽、具名插槽、作用域插槽。
插槽的基礎用法非常簡單，只需在 子組件 中使用 <slot> 標簽，就會將父組件傳進來的 HTML 內容渲染出來。
默認插槽 文檔
父組件
// Parent.vue <template> <Child> <div>雷猴啊</div> </Child> </template>
子組件
// Child.vue <template> <div> <slot></slot> </div> </template>
具名插槽 就是在 默認插槽 的基礎上進行分類，可以理解為對號入座。
具名插槽 文檔
父組件
// Parent.vue <template> <Child> <template v-slot:monkey> <div>雷猴啊</div> </template> <button>鯊魚辣椒</button> </Child> </template>
子組件
// Child.vue <template> <div> <!-- 默認插槽 --> <slot></slot> <!-- 具名插槽 --> <slot name="monkey"></slot> </div> </template>
父組件需要使用 <template> 標簽，并在標簽上使用 v-solt: + 名稱 。
子組件需要在 <slot> 標簽里用 name= 名稱 對應接收。
這就是 對號入座。
最后需要注意的是，插槽內容的排版順序，是 以子組件里的排版為準。
上面這個例子就是這樣，你可以仔細觀察子組件傳入順序和子組件的排版順序。
如果你用過 Element-Plus 這類 UI框架 的 Table ，應該就能很好的理解什么叫作用域插槽。
作用域插槽 文檔
父組件
// Parent.vue
<template>
<!-- v-slot="{scope}" 獲取子組件傳上來的數據 -->
<!-- :list="list" 把list傳給子組件 -->
<Child v-slot="{scope}" :list="list">
<div>
<div>名字：{{ scope.name }}</div>
<div>職業：{{ scope.occupation }}</div>
<hr>
</div>
</Child>
</template>
<script setup>
import { ref } from 'vue'
import Child from './components/Child.vue'
const list = ref([
{ name: '雷猴', occupation: '打雷'},
{ name: '鯊魚辣椒', occupation: '游泳'},
{ name: '蟑螂惡霸', occupation: '掃地'},
])
</script>子組件
// Child.vue
<template>
<div>
<!-- 用 :scope="item" 返回每一項 -->
<slot v-for="item in list" :scope="item" />
</div>
</template>
<script setup>
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
</script>我沒寫樣式，所以用 hr 元素讓視覺上看上去比較清晰我就是懶。
遇到多層傳值時，使用 props 和 emit 的方式會顯得比較笨拙。這時就可以用 provide 和 inject 了。
provide 是在父組件里使用的，可以往下傳值。
inject 是在子(后代)組件里使用的，可以網上取值。
無論組件層次結構有多深，父組件都可以作為其所有子組件的依賴提供者。
provide / inject 文檔
父組件
// Parent.vue
<template>
<Child></Child>
</template>
<script setup>
import { ref, provide, readonly } from 'vue'
import Child from './components/Child.vue'
const name = ref('猛虎下山')
const msg = ref('雷猴')
// 使用readonly可以讓子組件無法直接修改，需要調用provide往下傳的方法來修改
provide('name', readonly(name))
provide('msg', msg)
provide('changeName', (value) => {
name.value = value
})
</script>子組件
// Child.vue
<template>
<div>
<div>msg: {{ msg }}</div>
<div>name: {{name}}</div>
<button @click="handleClick">修改</button>
</div>
</template>
<script setup>
import { inject } from 'vue'
const name = inject('name', 'hello') // 看看有沒有值，沒值的話就適用默認值（這里默認值是hello）
const msg = inject('msg')
const changeName = inject('changeName')
function handleClick() {
// 這樣寫不合適，因為vue里推薦使用單向數據流，當父級使用readonly后，這行代碼是不會生效的。沒使用之前才會生效。
// name.value = '雷猴'
// 正確的方式
changeName('虎軀一震')
// 因為 msg 沒被 readonly 過，所以可以直接修改值
msg.value = '世界'
}
</script>provide 可以配合 readonly 一起使用，詳情可以看上面例子和注釋。
provide 和 inject 其實主要是用在深層關系中傳值，上面的例子只有父子2層，只是為了舉例說明我懶。
在 Vue2 有總線傳值的方法，我們在 Vue3 中也可以自己模擬。
這個方式其實有點像 Vuex 或者 Pinia 那樣，弄一個獨立的工具出來專門控制數據。
但和 Vuex 或 Pinia 相比，我們自己寫的這個方法并沒有很好的數據跟蹤之類的特性。
原理
我們創建一個 Bus.js 文件，用來控制數據和注冊事件的。
Bus.js 里有一個 Bus 類
eventList 是必須項，用來存放事件列表的。
constructor 里除了 eventList 外，其他都是自定義數據，公共數據就是存在這里的。
$on 方法用來注冊事件。
$emit 方法可以調用 $on 里的事件。
$off 方法可以注銷 eventList 里的事件。
然后需要用到總線的組件，都導入 Bus.js ，就可以共同操作一份數據了。
Bus.js
import { ref } from 'vue'
class Bus {
constructor() {
// 收集訂閱信息,調度中心
this.eventList = {}, // 事件列表，這項是必須的
// 下面的都是自定義值
this.msg = ref('這是一條總線的信息')
}
// 訂閱
$on(name, fn) {
this.eventList[name] = this.eventList[name] || []
this.eventList[name].push(fn)
}
// 發布
$emit(name, data) {
if (this.eventList[name]) {
this.eventList[name].forEach((fn) => {
fn(data)
});
}
}
// 取消訂閱
$off(name) {
if (this.eventList[name]) {
delete this.eventList[name]
}
}
}
export default new Bus()父組件
// Parent.vue
<template>
<div>
父組件:
<span >message: {{ message }}</span>
<span>msg: {{ msg }}</span>
</div>
<Child></Child>
</template>
<script setup>
import { ref } from 'vue'
import Bus from './Bus.js'
import Child from './components/Child.vue'
const msg = ref(Bus.msg)
const message = ref('hello')
// 用監聽的寫法
Bus.$on('changeMsg', data => {
message.value = data
})
</script>子組件
// Child.vue
<template>
<div>
子組件：
<button @click="handleBusEmit">觸發Bus.$emit</button>
<button @click="changeBusMsg">修改總線里的 msg</button>
</div>
</template>
<script setup>
import Bus from '../Bus.js'
function handleBusEmit() {
Bus.$emit('changeMsg', '雷猴啊')
}
function changeBusMsg() {
// console.log(Bus.msg)
Bus.msg.value = '在子組件里修改了總線的值'
}
</script>這個方法其實還挺好用的，但光看可能有點懵，請大家務必親手敲一下代碼實踐一下。
getcurrentinstance 是 vue 提供的一個方法，支持訪問內部組件實例。
getCurrentInstance只暴露給高階使用場景，典型的比如在庫中。強烈反對在應用的代碼中使用getCurrentInstance。請不要把它當作在組合式 API 中獲取this的替代方案來使用。
說白了，這個方法 適合在開發組件庫的情況下使用，不適合日常業務開發中使用。
getCurrentInstance **只能在 setup 或生命周期鉤子中調用。**
getcurrentinstance 文檔
在 <script setup> 中，我模擬了類似 $parent 和 $children 的方式。
父組件
// Parent.vue
<template>
<div>父組件 message 的值: {{ message }}</div>
<button @click="handleClick">獲取子組件</button>
<Child></Child>
<Child></Child>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import Child from './components/Child.vue'
const message = ref('雷猴啊')
let instance = null
onMounted(() => {
instance = getCurrentInstance()
})
// 子組件列表
let childrenList = []
// 注冊組件
function registrationCom(com) {
childrenList.push(com)
}
function handleClick() {
if (childrenList.length > 0) {
childrenList.forEach(item => {
console.log('組件實例：', item)
console.log('組件名(name)：', item.type.name)
console.log('組件輸入框的值：', item.devtoolsRawSetupState.inputValue)
console.log('---------------------------------------')
})
}
}
</script>子組件
// Child.vue
<template>
<div>
<div>----------------------------</div>
子組件：<button @click="handleClick">獲取父組件的值</button>
<br>
<input type="text" v-model="inputValue">
</div>
</template>
<script>
export default {
name: 'ccccc'
}
</script>
<script setup>
import { getCurrentInstance, onMounted, nextTick, ref } from 'vue'
const inputValue = ref('')
let instance = null
onMounted(() => {
instance = getCurrentInstance()
nextTick(() => {
instance.parent.devtoolsRawSetupState.registrationCom(instance)
})
})
function handleClick() {
let msg = instance.parent.devtoolsRawSetupState.message
msg.value = '哈哈哈哈哈哈'
}
</script>可以將代碼復制到你的項目中運行試試看，最好還是敲一遍咯。
Vuex 主要解決 跨組件通信 的問題。
在 Vue3 中，需要使用 Vuex v4.x 版本。
安裝
用 npm 或者 Yarn 安裝到項目中。
npm install vuex@next --save # 或 yarn add vuex@next --save
使用
安裝成功后，在 src 目錄下創建 store 目錄，再在 store 下創建 index.js 文件。
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})在 store/index.js 下輸入以上內容。
state：數據倉庫，用來存數據的。
getters：獲取數據的，有點像 computed 的用法(個人覺得)。
mutations: 更改 state 數據的方法都要寫在 mutations 里。
actions：異步異步異步，異步的方法都寫在這里，但最后還是需要通過 mutations 來修改 state 的數據。
modules：分包。如果項目比較大，可以將業務拆散成獨立模塊，然后分文件管理和存放。
然后在 src/main.js 中引入
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app
.use(store)
.mount('#app')store/index.js
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
msg: '雷猴'
}
})組件
// xxx.vue
<script setup>
import { useStore } from 'vuex'
const store = useStore()
console.log(store.state.msg) // 雷猴
</script>我覺得 Getter 方法和 computed 是有點像的。
比如我們需要過濾一下數據，或者返回時組裝一下數據，都可以用 Getter 方法。
store/index.js
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
msg: '雷猴'
},
getters: {
getMsg(state) {
return state.msg + ' 世界！'
}
}
})組件
// xxx.vue
<script setup>
import { useStore } from 'vuex'
const store = useStore()
console.log(store.getters.getMsg) // 雷猴 世界！
</script>Mutation 是修改 State 數據的唯一方法，這樣 Vuex 才可以跟蹤數據流向。
在組件中通過 commit 調用即可。
store/index.js
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
msg: '雷猴'
},
mutations: {
changeMsg(state, data) {
state.msg = data
}
}
})組件
// xxx.vue
<script setup>
import { useStore } from 'vuex'
const store = useStore()
store.commit('changeMsg', '蒜頭王八')
console.log(store.state.msg) // 蒜頭王八
</script>我習慣將異步的東西放在 Action 方法里寫，然后在組件使用 dispatch 方法調用。
store/index.js
// store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
msg: '雷猴'
},
mutations: {
changeMsg(state, data) {
state.msg = data
}
},
actions: {
fetchMsg(context) {
// 模擬ajax請求
setTimeout(() => {
context.commit('changeMsg', '鯊魚辣椒')
}, 1000)
}
}
})組件
// xxx.vue
<script setup>
import { useStore } from 'vuex'
const store = useStore()
store.dispatch('fetchMsg')
</script>Module 就是傳說中的分包了。這需要你將不同模塊的數據拆分成一個個 js 文件。
我舉個例子，目錄如下
store |- index.js |- modules/ |- user.js |- goods.js
index.js 對外的出口（主文件）
modules/user.js 用戶相關模塊
modules/goods.js 商品模塊
index.js
import { createStore } from 'vuex'
import user from './modules/user'
import goods from './modules/goods'
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
user,
goods
}
})user.js
const user = {
state: {
},
getters: {
},
mutations: {
},
actions: {
}
}
export default usergoods.js
const goods = {
state: {
},
getters: {
},
mutations: {
},
actions: {
}
}
export default goods然后在各個模塊里放入相應的數據和方法就行。
在組建中調用方法和訪問數據，都和之前的用法差不多的。
以上就是 Vuex 的基礎用法。除此之外，Vuex 還有各種語法糖，大家可以自行查閱 官方文檔
Pinia 是最近比較火熱的一個工具，也是用來處理 跨組件通信 的，極大可能成為 Vuex 5 。
Pinia 文檔
從我使用 Pinia 一陣后的角度來看，Pinia 跟 Vuex 相比有以下優點：
調用時代碼跟簡潔了。
對 TS 更友好。
合并了 Vuex 的 Mutation 和 Action 。天然的支持異步了。
天然分包。
除此之外，Pinia 官網還說它適用于 Vue2 和 Vue3。但我沒試過在 Vue2 中使用我懶得試。
Pinia 簡化了狀態管理模塊，只用這3個東西就能應對日常大多任務。
state：存儲數據的倉庫
getters：獲取和過濾數據（跟 computed 有點像）
actions：存放 “修改 state ”的方法
我舉個簡單的例子
npm install pinia # 或 yarn add pinia
在 src 目錄下創建 store 目錄，再在 store 里創建 index.js 和 user.js
目錄結構如下
store |- index.js |- user.js
index.js
import { createPinia } from 'pinia'
const store = createPinia()
export default storeuser.js
常見的寫法有2種，選其中一種就行。
import { defineStore } from 'pinia'
// 寫法1
export const useUserStore = defineStore({
id: 'user', // id必填，且需要唯一
state: () => {
return {
name: '雷猴'
}
},
getters: {
fullName: (state) => {
return '我叫 ' + state.name
}
},
actions: {
updateName(name) {
this.name = name
}
}
})
// 寫法2
export const useUserStore = defineStore('user',{
state: () => {
return {
name: '雷猴'
}
},
getters: {
fullName: (state) => {
return '我叫 ' + state.name
}
},
actions: {
updateName(name) {
this.name = name
}
}
})然后在 src/main.js 中引入 store/index.js
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app
.use(store)
.mount('#app')在組件中使用
組件
// xxx.vue
<template>
<div>
<div>name: {{ name }}</div>
<div>全名：{{ fullName }}</div>
<button @click="handleClick">修改</button>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
// const name = computed(() => userStore.name)
// 建議
const { name, fullName } = storeToRefs(userStore)
function handleClick() {
// 不建議這樣改
// name.value = '蝎子萊萊'
// 推薦的寫法！！！
userStore.updateName('李四')
}
</script>啰嗦兩句
其實 Pinia 的用法和 Vuex 是挺像的，默認就是分包的邏輯，在這方面我支持 菠蘿(Pinia)。
Pinia 還提供了多種語法糖，強烈建議閱讀一下 官方文檔。
我們前面用到的 總線 Bus 方法，其實和 mitt.js 有點像，但 mitt.js 提供了更多的方法。
比如：
on：添加事件
emit：執行事件
off：移除事件
clear：清除所有事件
mitt.js 不是專門給 Vue 服務的，但 Vue 可以利用 mitt.js 做跨組件通信。
github 地址
npm 地址
npm i mitt
我模擬一下 總線Bus 的方式。
我在同級目錄創建3個文件用作模擬。
Parent.vue Child.vue Bus.js
Bus.js
// Bus.js import mitt from 'mitt' export default mitt()
Parent.vue
// Parent.vue
<template>
<div>
Mitt
<Child />
</div>
</template>
<script setup>
import Child from './Child.vue'
import Bus from './Bus.js'
Bus.on('sayHello', () => console.log('雷猴啊'))
</script>Child.vue
// Child.vue
<template>
<div>
Child：<button @click="handleClick">打聲招呼</button>
</div>
</template>
<script setup>
import Bus from './Bus.js'
function handleClick() {
Bus.emit('sayHello')
}
</script>此時，點擊 Child.vue 上的按鈕，在控制臺就會執行在 Parent.vue 里定義的方法。
mitt.js 的用法其實很簡單，建議跟著 官方示例 敲一下代碼，幾分鐘就上手了。
感謝各位的閱讀，以上就是“Vue3中組件通訊的方法有哪些”的內容了，經過本文的學習后，相信大家對Vue3中組件通訊的方法有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
