vue3.2之defineExpose

最新推荐文章于 2024-07-01 19:38:08 发布

郑建零零发

最新推荐文章于 2024-07-01 19:38:08 发布

阅读量178

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52421092/article/details/131023874

版权

该文章展示了在Vue中如何使用<scriptsetup>语法进行父子组件通信。子组件包含一个计数器变量`count`和一个处理函数`handle`，父组件通过`ref`获取子组件的`count`值并调用`handle`方法。

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

子组件：

<script setup lang="ts">
import { ref } from "vue"
const count = ref(2)

const handle = () => {
    console.log("这是一个子组件哟");
}

defineExpose({
    count,
    handle,
})
</script>

父组件

<script setup lang="ts">
import { ref } from "vue"
import { onMounted } from "@vue/runtime-core"
import Info from './info.vue'
const InfoRef = ref<{count: number, handle: () => void} | null>(null);

onMounted(() => {
    console.log(InfoRef.value?.count)  // 2
    InfoRef.value?.handle() // 这是一个子组件哟
})
</script>

<template>
    <Info ref="InfoRef" />
</template>

关注博主即可阅读全文