提示信息

typescirpt, setup写法,如何导出子组件中的方法

秀豆豆 已关注

在 Vue 3 中,使用 TypeScript 和 Composition API 的 setup 函数,你可以很容易地将子组件的函数导出供父组件使用。以下是一个示例:

  1. 在子组件中定义一个方法并导出:
  1. <script setup lang="ts">
  2. import { defineExpose } from 'vue'
  3. function childMethod() {
  4. console.log("childMethod called");
  5. }
  6. defineExpose({
  7. childMethod
  8. })
  9. </script>
  1. 在父组件中,给子组件添加一个 ref 属性,并在需要的地方调用子组件的方法:
  1. <template>
  2. <child-component ref="childRef"></child-component>
  3. <button @click="callChildMethod">Call Child Method</button>
  4. </template>
  5. <script setup lang="ts">
  6. import { ref } from 'vue'
  7. import ChildComponent from "./ChildComponent.vue";
  8. const childRef = ref(null)
  9. function callChildMethod() {
  10. childRef.value?.childMethod()
  11. }
  12. </script>

在上述代码中,当你点击 "Call Child Method" 按钮时,父组件会通过 childRef 访问到子组件,然后调用其 childMethod 方法。注意我们在这里使用了 defineExpose 函数来定义需要暴露给其他组件使用的方法。

注意,因为 ref 只会在组件渲染完成后被填充,所以你应该避免在未确认 ref 已经被填充的情况下尝试访问它,这也是我们在 callChildMethod 方法中用 ? 操作符来避免未定义引用的原因。

    遇到难题? "AI大模型GPT4.0、GPT" 是你的私人解答专家! 点击按钮去提问......
秀豆豆 关注 已关注

最近一次登录:2023-12-14 17:01:27   

暂时还没有签名,请关注我或评论我的文章
×
免费图表工具,画流程图、架构图