欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

老生常談vue3組件通信方式

 更新時(shí)間:2022年08月18日 14:21:55   作者:gongshaoxu  
這篇文章主要介紹了vue3組件通信方式,面試題經(jīng)常會(huì)問到vue3組件間的通信方式,今天就通過實(shí)例代碼給大家詳細(xì)介紹下,對(duì)vue3組件通信相關(guān)知識(shí)感興趣的朋友一起看看吧

vue3七種組件通信方式

面試題經(jīng)常會(huì)問到vue3組件間的通信方式,下文列舉了七種常見的通信方式。

  • props
  • emit
  • v-model
  • refs
  • provide/inject
  • eventBus
  • Vuex4/pinia(vuex5)

1. Props方式

父組件以數(shù)據(jù)綁定的形式聲明要傳遞的數(shù)據(jù),子組件通過defineProperty()方法創(chuàng)建props對(duì)象,即可拿到父組件傳來的數(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是子組件要傳遞的動(dòng)作,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不能嚴(yán)格成為數(shù)據(jù)的傳遞方式,其實(shí)只是減少了代碼量。

<ChildComponent v-model:list="list" />
// 等價(jià)于
<ChildComponent :list="pageTitle" @update:list="list = $event" />

子組件需要emit一個(gè)叫update:xxx的事件,再把需要更新的響應(yīng)式數(shù)據(jù)傳給emit方法的第二個(gè)參數(shù)即可,如:

const emits = defineEmits(['update:list'])
emits('update:list', arr)

4、Refs

有時(shí)候想訪問 r e f s 綁 定 的 組 件 的 屬 性 或 者 方 法 , 我 們 會(huì) 使 用 refs綁定的組件的屬性或者方法,我們會(huì)使用 refs綁定的組件的屬性或者方法,我們會(huì)使用refs。但是Vue3不同于Vue2,在 Vue3的setup中我們是無法訪問到this的,所以我們需要借助一個(gè)方法,那就是getCurrentInstance,該方法返回了當(dāng)前的實(shí)例對(duì)象。

父組件如下:

<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>語法糖的寫法,其組件是默認(rèn)關(guān)閉的,也就是說如果是通過$refs或者$parents來訪問子組件中定義的值是拿不到的,必須通過defineExpose向外暴露你想獲取的值才行。

5. provide/inject

provide/inject是 Vue 中提供的一對(duì) API。無論層級(jí)多深,API 都可以實(shí)現(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)管理工具,使用這兩個(gè)工具可以輕松實(shí)現(xiàn)組件通信。

到此這篇關(guān)于vue3組件通信方式的文章就介紹到這了,更多相關(guān)vue3組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vuex中...mapstate和...mapgetters的區(qū)別及說明

    vuex中...mapstate和...mapgetters的區(qū)別及說明

    這篇文章主要介紹了vuex中...mapstate和...mapgetters的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • el-menu遞歸實(shí)現(xiàn)多級(jí)菜單組件的示例

    el-menu遞歸實(shí)現(xiàn)多級(jí)菜單組件的示例

    本文主要介紹了el-menu使用遞歸組件實(shí)現(xiàn)多級(jí)菜單組件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • c++游戲教程使用easyx做出大飛機(jī)

    c++游戲教程使用easyx做出大飛機(jī)

    這篇文章主要為大家介紹了c++游戲教程使用easyx實(shí)現(xiàn)大飛機(jī)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • vue3路由配置以及路由跳轉(zhuǎn)傳參詳解

    vue3路由配置以及路由跳轉(zhuǎn)傳參詳解

    路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • Ant?Design?of?Vue的樹形控件Tree的使用及說明

    Ant?Design?of?Vue的樹形控件Tree的使用及說明

    這篇文章主要介紹了Ant?Design?of?Vue的樹形控件Tree的使用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vant-image本地圖片無法顯示的解決方式

    vant-image本地圖片無法顯示的解決方式

    這篇文章主要介紹了vant-image本地圖片無法顯示的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 一文總結(jié)Vue和React的異同

    一文總結(jié)Vue和React的異同

    這篇文章主要介紹了Vue和React的相同點(diǎn)不不同點(diǎn),文中對(duì)比介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2023-05-05
  • Vue中通過Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例的方法

    Vue中通過Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例的方法

    這篇文章主要介紹了Vue中通過Vue.extend動(dòng)態(tài)創(chuàng)建實(shí)例的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • Vue3.2單文件組件setup的語法糖與新特性總結(jié)

    Vue3.2單文件組件setup的語法糖與新特性總結(jié)

    ue3上線已經(jīng)很久了,許多小伙伴應(yīng)該都已經(jīng)使用過vue3了,下面這篇文章主要給大家介紹了關(guān)于Vue3.2單文件組件setup的語法糖與新特性總結(jié)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • vue3的setup語法糖簡(jiǎn)單封裝ckediter的過程

    vue3的setup語法糖簡(jiǎn)單封裝ckediter的過程

    Vue3官方提供了 script setup 語法糖,只需在script標(biāo)簽中添加setup,組件只需引入不用注冊(cè),屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語法糖簡(jiǎn)單封裝ckediter的過程,感興趣的朋友一起看看吧
    2023-10-10

最新評(píng)論