记录vue3 setup 语法糖父组件使用子组件的属性及方法

原创已于 2023-02-21 16:09:57 修改 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-03-25 11:38:17 首次发布

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Vue的defineExpose来正确暴露子组件的方法和数据，以便父组件能够访问这些内容。通过具体示例展示了子组件中定义的数据如何被父组件获取。

当时用语法糖时，需要将组建的属性及方法通过defineExpose导出，父组件才能访问到数据，否则拿不到子组件的数据

子组件child.vue

<script lang="ts" setup>
 import { ref } from 'vue'
 const count = ref<number>(0)
defineExpose({
    count
})
<script>

父组件parent.vue

<template>
    <child ref='childRef'>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
import Child from './child.vue'
const childRef = ref<InstanceType<typeof Child>(null)
console.log(childRef.value?.count) //访问子组件的值   
</script>