vue子组件传递参数给父组件

最新推荐文章于 2025-12-07 09:58:49 发布

原创最新推荐文章于 2025-12-07 09:58:49 发布 · 378 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了在Vue3中如何使用`scriptsetup`和`ref`以及`defineExpose`来管理子组件的交互，重点讲解了如何在父组件中访问和操作子组件的实例属性。

子组件

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

// 像 defineExpose 这样的编译器宏不需要导入
defineExpose({  //暴露子组件的相关参数
  a,
  b
})
</script>


<template>
    <div>
        asddsa
    </div>
</template>

父组件

<script setup>
import { ref, onMounted } from 'vue'
import Child from './components/Child.vue'
const child = ref(null)
onMounted(() => {
  // child.value 是 <Child /> 组件的实例
 console.log(child.value)
})
</script>
<template>
  <Child ref="child" />
</template>