typescirpt, setup写法,如何导出子组件中的方法
在 Vue 3 中,使用 TypeScript 和 Composition API 的 setup
函数,你可以很容易地将子组件的函数导出供父组件使用。以下是一个示例:
- 在子组件中定义一个方法并导出:
<script setup lang="ts">
import { defineExpose } from 'vue'
function childMethod() {
console.log("childMethod called");
}
defineExpose({
childMethod
})
</script>
- 在父组件中,给子组件添加一个
ref
属性,并在需要的地方调用子组件的方法:
<template>
<child-component ref="childRef"></child-component>
<button @click="callChildMethod">Call Child Method</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ChildComponent from "./ChildComponent.vue";
const childRef = ref(null)
function callChildMethod() {
childRef.value?.childMethod()
}
</script>
在上述代码中,当你点击 "Call Child Method" 按钮时,父组件会通过 childRef
访问到子组件,然后调用其 childMethod
方法。注意我们在这里使用了 defineExpose
函数来定义需要暴露给其他组件使用的方法。
注意,因为 ref
只会在组件渲染完成后被填充,所以你应该避免在未确认 ref
已经被填充的情况下尝试访问它,这也是我们在 callChildMethod
方法中用 ?
操作符来避免未定义引用的原因。