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> 组件中要暴露出去的属性。

相关推荐
掘金安东尼15 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
跟橙姐学代码15 小时前
Python异常处理:告别程序崩溃,让代码更优雅!
前端·python·ipython
niuhuahua15 小时前
大屏拖拽功能,配合ai组件使用,配合各个组件都可使用
前端
得物技术15 小时前
前端日志回捞系统的性能优化实践|得物技术
前端·javascript·性能优化
ZKshun15 小时前
[ 前端JavaScript的事件流机制 ] - 事件捕获、冒泡及委托原理
javascript
陶甜也15 小时前
threeJS 实现开花的效果
前端·vue·blender·threejs
用户76787977373215 小时前
后端转全栈之Next.js 路由系统App Router
前端·next.js
OEC小胖胖15 小时前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
等什么君!15 小时前
如何 正确使用 nrm 工具 管理镜像源
vue.js
warder15 小时前
字典状态管理:基于 Vue3 + Pinia 的工程化实践
vue.js