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

相关推荐
musk12127 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘36 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref