快捷導(dǎo)航

Vue3父子組件互調(diào)方法的實(shí)現(xiàn)

更新時(shí)間：2022年04月14日 11:59:47 作者：訾博ZiBo

本文主要介紹了Vue3父子組件互調(diào)方法的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、父組件調(diào)用子組件方法

下面演示為使用 setup 語(yǔ)法糖的情況，值得注意的是子組件需要使用 defineExpose 對(duì)外暴露方法，父組件才可以調(diào)用！

1、子組件

<template>
</template>

<script setup lang="ts">
// 第一步：定義子組件里面的方法
const doSth = (str: string) => {
  console.log("子組件的 doSth 方法執(zhí)行了！" + str);
}
// 第二步：暴露方法
defineExpose({ doSth })
</script>

<style scoped>
</style>

2、父組件

<template>
  <button @click="getChild">觸發(fā)子組件方法</button>
  <!-- 第一步：定義 ref -->
  <HelloWorld ref="childRef" />
</template>

<script setup lang="ts">
// 一、導(dǎo)入
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

// 二、數(shù)據(jù)
// 第二步：定義與 ref 同名變量
const childRef = ref<any>();

// 三、函數(shù)
const getChild = () => {
    // 第三步： 調(diào)用子組件的方法或者變量，通過(guò)value
    childRef.value.doSth("隨便傳值！");
}
</script>

<style>
</style>

3、測(cè)試結(jié)果

請(qǐng)?zhí)砑訄D片描述

4、關(guān)于 defineExpose 的官方文檔

網(wǎng)址：https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

defineExpose

使用 <script setup> 的組件是默認(rèn)關(guān)閉的，也即通過(guò)模板 ref 或者 $parent 鏈獲取到的組件的公開實(shí)例，不會(huì)暴露任何在 <script setup> 中聲明的綁定。

為了在 <script setup> 組件中明確要暴露出去的屬性，使用 defineExpose 編譯器宏：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

當(dāng)父組件通過(guò)模板 ref 的方式獲取到當(dāng)前組件的實(shí)例，獲取到的實(shí)例會(huì)像這樣 { a: number, b: number } (ref 會(huì)和在普通實(shí)例中一樣被自動(dòng)解包)。

二、子組件調(diào)用父組件方法

1、子組件

<template>
</template>

<script setup lang="ts">
import { onMounted } from "@vue/runtime-core";
const emit = defineEmits([ "doSth" ]);
const doSth = () => {
  emit('doSth');
}
onMounted(() => {
  doSth();
});
</script>

<style scoped>
</style>

2、父組件

<template>
  <!-- 第一步：使用 @do-sth 或 @doSth 接受方法 -->
  <HelloWorld @doSth="sayHello" />
</template>

<script setup lang="ts">
// 一、導(dǎo)入
import HelloWorld from './components/HelloWorld.vue';

// 二、函數(shù)
// 第二步： 自定義方法
const sayHello = () => {
  console.log("hello world!");
}
</script>

<style>
</style>

3、測(cè)試結(jié)果

請(qǐng)?zhí)砑訄D片描述

4、關(guān)于 defineEmits 的官方文檔

網(wǎng)址：https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-和-defineemits

defineProps 和 defineEmits

在 <script setup> 中必須使用 defineProps 和 defineEmits API 來(lái)聲明 props 和 emits ，它們具備完整的類型推斷并且在 <script setup> 中是直接可用的：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的編譯器宏。他們不需要導(dǎo)入且會(huì)隨著 <script setup> 處理過(guò)程一同被編譯掉。
defineProps 接收與 props 選項(xiàng)相同的值，defineEmits 也接收 emits 選項(xiàng)相同的值。
defineProps 和 defineEmits 在選項(xiàng)傳入后，會(huì)提供恰當(dāng)?shù)念愋屯茢唷?/li>
傳入到 defineProps 和 defineEmits 的選項(xiàng)會(huì)從 setup 中提升到模塊的范圍。因此，傳入的選項(xiàng)不能引用在 setup 范圍中聲明的局部變量。這樣做會(huì)引起編譯錯(cuò)誤。但是，它可以引用導(dǎo)入的綁定，因?yàn)樗鼈円苍谀K范圍內(nèi)。

如果使用了 Typescript，使用純類型聲明來(lái)聲明 prop 和 emits 也是可以的。

到此這篇關(guān)于Vue3父子組件互調(diào)方法的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3父子組件互調(diào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: