老生常談vue3組件通信方式
vue3七種組件通信方式
面試題經(jīng)常會問到vue3組件間的通信方式，下文列舉了七種常見的通信方式。
- props
- emit
- v-model
- refs
- provide/inject
- eventBus
- Vuex4/pinia(vuex5)
1. Props方式
父組件以數(shù)據(jù)綁定的形式聲明要傳遞的數(shù)據(jù)，子組件通過defineProperty()方法創(chuàng)建props對象，即可拿到父組件傳來的數(shù)據(jù)。
父組件的template中：
<!-- list是我們要傳遞的數(shù)據(jù) --> <child-components :list="list"></child-components>
子組件：
<template>
<ul>
<li v-for="i in props.list" :key="i">{{ i }}</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
</script>
注意在
2. emit方式
emit方式也是Vue中最常見的組件通信方式，該方式用于子傳父；
父組件的template中：
<!-- add是子組件要傳遞的動作,handleAdd是監(jiān)聽到之后執(zhí)行的事件 -->
<child-components @add="handleAdd"></child-components>
<script>
const list = ref([1,2,3])
const handleAdd = value => {
list.value.push(value)
}
</script>
子組件中：
const emits = defineEmits(['add'])
emits('add', 1)
3. v-model方式
v-model不能嚴格成為數(shù)據(jù)的傳遞方式，其實只是減少了代碼量。
<ChildComponent v-model:list="list" /> // 等價于 <ChildComponent :list="pageTitle" @update:list="list = $event" />
子組件需要emit一個叫update:xxx的事件，再把需要更新的響應式數(shù)據(jù)傳給emit方法的第二個參數(shù)即可，如：
const emits = defineEmits(['update:list'])
emits('update:list', arr)
4、Refs
有時候想訪問 r e f s 綁 定 的 組 件 的 屬 性 或 者 方 法 ， 我 們 會 使 用 refs綁定的組件的屬性或者方法，我們會使用 refs綁定的組件的屬性或者方法，我們會使用refs。但是Vue3不同于Vue2，在 Vue3的setup中我們是無法訪問到this的，所以我們需要借助一個方法，那就是getCurrentInstance，該方法返回了當前的實例對象。
父組件如下：
<template>
<div>
<Child ref="child"></Child>
<button @click="show">Show Child Message</button>
</div>
</template>
<script setup>
import { getCurrentInstance } from '@vue/runtime-core';
import Child from './Child.vue';
const currentInstance = getCurrentInstance()
function show() {
currentInstance.$refs.child.alertMessage()
}
</script>
子組件代碼如下：
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script setup>
import { ref } from '@vue/reactivity';
let message = ref('我是子元素').value
const alertMessage = function () {
alert(message)
}
defineExpose({
message,
alertMessage
})
</script>
注意??，通過<script setup>語法糖的寫法，其組件是默認關閉的，也就是說如果是通過$refs或者$parents來訪問子組件中定義的值是拿不到的，必須通過defineExpose向外暴露你想獲取的值才行。
5. provide/inject
provide/inject是 Vue 中提供的一對 API。無論層級多深，API 都可以實現(xiàn)父組件到子孫組件的數(shù)據(jù)傳遞。
// 父組件中
provide('list', list.value)
// 子組件中
const list = inject('list')
6. eventBus
Vue 3 中移除了 eventBus，但可以借助第三方工具來完成。Vue 官方推薦使用 mitt 或 tiny-emitter。
7. vuex/pinia
Vuex 和 Pinia 是 Vue 3 中的狀態(tài)管理工具，使用這兩個工具可以輕松實現(xiàn)組件通信。
到此這篇關于vue3組件通信方式的文章就介紹到這了,更多相關vue3組件通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中的stylus及stylus-loader版本問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了Vue中的keep-alive，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue2 使用 Echarts 創(chuàng)建圖表實例代碼
本篇文章主要介紹了Vue2 使用 Echarts 創(chuàng)建圖表實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vue2.0+koa2+mongodb實現(xiàn)注冊登錄
這篇文章主要介紹了vue2.0+koa2+mongodb實現(xiàn)注冊登錄功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
下面小編就為大家?guī)硪黄猇ue-router路由判斷頁面未登錄跳轉到登錄頁面的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue 實現(xiàn)一個簡單的全局調用彈窗案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue3項目中封裝axios的示例代碼,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
Vue3?Suspense實現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載
Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時可以提供更好的用戶體驗,下面小編就來和大家詳細講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧2023-10-10
詳解Vue基于 Nuxt.js 實現(xiàn)服務端渲染（SSR）
直接使用 Vue 構建前端單頁面應用，頁面源碼時只有簡單的幾行 html，這并不利于網(wǎng)站的 SEO，這時候就需要服務端渲染，本篇文章主要介紹了詳解Vue基于 Nuxt.js 實現(xiàn)服務端渲染（SSR），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了Vue中四種操作dom方法，首先，在vue中強烈禁用原生與jquery來操作DOM元素。我們要充分的利用vue的優(yōu)勢：MVVM，在vue中程序員幾乎不操作DOM，只需要維護好數(shù)據(jù)即可，vue給程序員提供ref引用，不調用api直接獲取元素組件的使用2023-02-02