Vue3父子組件互調怎么實現

今天小編給大家分享一下Vue3父子組件互調怎么實現的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、父組件調用子組件方法

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

1、子組件

<template>
</template>

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

<style scoped>
</style>

2、父組件

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

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

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

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

<style>
</style>

3、測試結果

4、關于 defineExpose 的官方文檔

defineExpose

使用 <script setup> 的組件是默認關閉的，也即通過模板 ref 或者 $parent 鏈獲取到的組件的公開實例，不會暴露任何在 <script setup> 中聲明的綁定。

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

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

const a = 1
const b = ref(2)

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

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

二、子組件調用父組件方法

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">
// 一、導入
import HelloWorld from './components/HelloWorld.vue';

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

<style>
</style>

3、測試結果

4、關于 defineEmits 的官方文檔

defineProps 和 defineEmits

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

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

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

• defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的編譯器宏。他們不需要導入且會隨著 <script setup> 處理過程一同被編譯掉。

• defineProps 接收與 props 選項相同的值，defineEmits 也接收 emits 選項相同的值。

• defineProps 和 defineEmits 在選項傳入后，會提供恰當的類型推斷。

• 傳入到 defineProps 和 defineEmits 的選項會從 setup 中提升到模塊的范圍。因此，傳入的選項不能引用在 setup 范圍中聲明的局部變量。這樣做會引起編譯錯誤。但是，它可以引用導入的綁定，因為它們也在模塊范圍內。

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

以上就是“Vue3父子組件互調怎么實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。