vue3(nuxt3)中使用ref获取不到子组件变量

vue2中调用子组件中的方法,可以直接 this.$refs.child 就可以获取到子组件,再继续 .a 就可以获取到child组件中的变量a。

到vue3中,这个方式有所改变:

html 复制代码
<!-- Parent.vue -->
<template>
  <div>
    <h1>Parent</h1>
    <Child ref="child" />
  </div>
</template>
<script setup>
import Child from './Child.vue'
const child = ref(null) // ref 是一个响应式的变量,它指向了 Child 组件的实例
child.value.doSomething() // 获取child中的方法
console.log(child.value.a)
</script>

<!-- Child.vue -->
<template>
  <div>
    <h1>Child</h1>
  </div>
</template>
<script setup>
const a = ref(1)
function doSomething() {
  console.log('do something')
  a.value++
}
defineExpose({ // 重点:需要expose暴露出去对应的方法.变量同理
  a,
  doSomething
})

</script>

重点:child中的变量和方法,在使用setup语法糖时,必须使用defineExpose将需要的内容暴露出去。

官方文档:

使用 <script setup> 的组件是默认关闭 的------即通过模板引用或者 $parent 链获取到的组件的公开实例,不会 暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性。

相关推荐
玲小珑几秒前
LangChain.js 完全开发手册(十五)实战综合项目一:智能文档处理系统
前端·langchain·ai编程
午安~婉2 分钟前
硅谷甄选(续2)首页
java·前端·javascript
NULL Not NULL3 分钟前
Vue 前端面试题(含答案)大全 v2025
前端·javascript·vue.js
苏州第一深情6 分钟前
终结加班眼酸?明基RD280U测评:程序员的双倍快乐,竟是4K护眼大屏给的!
前端·后端
i18nsite11 分钟前
互联网重构日记:1 - 开篇
前端·后端
洋不写bug13 分钟前
html表格,无序,有序,自定义,无语义,表单标签,特殊字符详解
前端·html
JarvanMo24 分钟前
Flutter. 适用于 GetX 5 的 CLI (命令行接口/工具)
前端
dyxal27 分钟前
VS Code 1.52.1 对应一些插件版本
前端·chrome
李剑一31 分钟前
vitepress中logo打包丢失
vue.js
融化的雪39 分钟前
reactflow整理节点,尾节点位置的大坑
开发语言·前端·javascript