vue3 ts setup父子组件传值

最新推荐文章于 2024-08-02 09:29:40 发布

Forpear

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量401

点赞数

分类专栏：前端 html 文章标签： javascript typescript vue.js

本文链接：https://blog.csdn.net/m0_54850952/article/details/123369279

版权

本文探讨了在Vue3中使用TypeScript时，如何通过setup语法糖进行父子组件间的通信，特别是如何正确使用ref来访问并调用子组件的方法。在示例中，父组件尝试通过ref获取并调用子组件的方法，解决了一个在通信过程中遇到的问题。

摘要由CSDN通过智能技术生成

问题描述：
使用<script lang="ts" setup>标签获取ref总是找不到，起初我以为是传染子组件先后顺序问题增加一个setTimeout 和nexttick，但是还是找不到ref。
查看资料看到这种写法增加了三个语法糖（父子组件通信）使用defineEmit,defineProps,defineExpose

这里我主要是想父组件调用子组件的方法，所以使用defineEmit还有获取ref所以使用defineExpose

父组件

<template>
  <div class="table">
    <DelModal ref="delModal" @on-emit-delete="onDel" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { Button, Switch } from 'ant-design-vue';
  import { BasicTable } from '/@/components/Table';
  import { useData } from '../use/index';
  import DelModal from '../modal/index.vue';

  // const props = defineProps({});
  let { registerTable } = useData