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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/38615.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

prometheus 安装node_exporter, node_exporter 安装最新版 普罗米修思安装监控服务器client

1. 本文介绍两种安装方式&#xff0c;一种安装为service,使用systemctl start node_exporter管理&#xff0c;第二种为安装docker内 容器内使用。 1.1 安装到系统内&#xff1a; 1.1.1 github地址&#xff1a; Releases prometheus/node_exporter GitHub ​ 1.1.2 下载命…

JS数据处理(冒泡寻找对象里面有个Key相同的值并处理相关数据)

1.需要处理成的数据格式 [{ mpptNumber: 1, list:[{checked: false,pvEnableStatus: 0,pvSerialNumber: 1,},{checked: false,pvEnableStatus: 0,pvSerialNumber: 2,}] }, { mpptNumber: 2, list:[{checked: false,pvEnableStatus: 0,pvSerialNumber: 1,},{checked: false,pvE…

【总线】AXI4第四课时:握手机制详解

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

读取MedMNIST的每个类的数量

不带标签 from collections import Counter import numpy as npimport torch from torch import nn, optim from torch.utils.data import DataLoader # from vit_pytorch.cross_vit import CrossViT from medmnist import DermaMNIST from medmnist import INFO import torc…

炎黄数智人:国家体育总局冬运中心——AI裁判与教练“观君”赋能冰雪运动新篇章

在科技创新的浪潮下&#xff0c;国家体育总局冬季运动管理中心&#xff08;以下简称“冬运中心”&#xff09;揭开了人工智能在体育领域应用的新篇章。隆重宣布推出革命性的AI裁判与教练系统——“观君”&#xff0c;该系统将在冰雪运动项目中大放异彩&#xff0c;为运动员的训…

Administrators就最高了???system是什么??本地用户提权内网学习第三天 你知道uac是什么??

我们今天来说说本地用户提权的操作&#xff0c;我们在有webshell过后我们要进行进一步的提权操作&#xff0c;要不然对我们后期的内网渗透会有一些阻碍的操作。比如说我们使用mimikatz来进行抓取密码&#xff0c;就不能够成功。 Administrators与system的区别 我们来说说Admin…

OpenBayes 教程上新 | CVPR 获奖项目,BioCLlP 快速识别生物种类,再也不会弄混小浣熊和小熊猫了!

市面上有很多植物识别的 App&#xff0c;通过对植物的叶片、花朵、果实等特征进行准确的识别&#xff0c;从而确定植物的种类、名称。但动物识别的 App 却十分有限&#xff0c;这使我们很难区分一些外形相似的动物&#xff0c;例如小浣熊和小熊猫。 左侧为小浣熊&#xff0c;右…

Springboot项目实训--day1

目录 一、软件安装 二、软件的简单了解 三、基础知识应用 1、四个常用注释 2、尝试新建类 3、控制反转&#xff08;IOC容器&#xff09; 4、返回数据给浏览器 5、浏览器传回数据给服务器 易错点 一、软件安装 需要安装的软件是idea专业版&#xff0c;刚使用的时候可以使…

Java多线程编程实践中的常见问题与解决方案

Java多线程编程实践中的常见问题与解决方案 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 多线程编程是Java开发中的一个重要主题&#xff0c;能够充分利用多…

3dmax如何制作全景图?渲染100邀请码1a12

全景图很常见&#xff0c;制作起来也简单&#xff0c;这里我给大家稍微分享下。 1、创建相机 打开要渲染全景的场景文件&#xff0c;创建相机并调整好位置。 2、 设置分辨率 按F10打开渲染设置界面&#xff0c;选择相机视口&#xff0c;在公用里设置宽度和高度&#xff0c;…

vite 项目打包优化-基础篇

相较于【vue-cli或webpack】&#xff0c;vite内置了常用配置&#xff0c;无需开发者重写&#xff0c;更多精细优化需自行配置 1、项目打包完运行空白 引用资源路径问题&#xff0c;打包完的【index.html】文件引用其他文件的引用地址不对 参考配置&#xff1a;https://cn.vi…

HarmonyOS开发探索:自定义键盘-webview

场景描述 在特殊的H5场景下需要应用拉起自定义键盘进行输入。 场景一&#xff1a;使用jsBridge拉起自定义弹窗写自定义键盘&#xff0c;再通过jsBridge传参实现输入。 场景二&#xff1a;使用web的同层渲染将原生textInput组件渲染到页面上。 方案描述 通过注册一个js代理…

Vue-element 组件dialog右上角点击 X 清空表单校验信息

问题&#xff1a; 点击确定触发校验后&#xff0c;点击弹窗右上角的 X号关闭弹窗后再次打开弹窗&#xff0c;校验规则没有被清空 解决方法&#xff1a;

Asp.NET identity以及Owin

》》》Identity是集成到Owin框架中中 ● Microsoft.AspNet.Identity.Core&#xff1a;Identity的核心类库&#xff0c;实现了身份验证的核心功能&#xff0c;并提供了拓展接口。● Microsoft.AspNet.Identity.EntityFramework&#xff1a;Identity数据持久化的EF实现。   ● …

Soul探索未来智能互动模式,人机交互重塑社交元宇宙体验

在当今快速发展的科技领域中,人机交互已成为一个备受关注的话题。随着人工智能和机器学习技术的不断进步,人们与计算机和智能设备之间的互动方式正在发生翻天覆地的变化。这种交互不止局限于键盘和鼠标,更涵盖了语音识别、手势控制、虚拟现实等多种形式。人机交互的创新不仅提高…

七一建党节|热烈庆祝中国共产党成立103周年!

时光荏苒&#xff0c;岁月如梭。 在这热情似火的夏日&#xff0c; 我们迎来了中国共产党成立103周年的重要时刻。 这是一个值得全体中华儿女共同铭记和庆祝的日子&#xff0c; 也是激励我们不断前进的重要时刻。 103年&#xff0c; 风雨兼程&#xff0c;砥砺前行。 从嘉兴…

CesiumJS【Basic】- #038 绘制轮廓线(Primitive方式)

文章目录 绘制轮廓线(Primitive方式)1 目标2 代码2.1 main.ts绘制轮廓线(Primitive方式) 1 目标 使用Primitive方式绘制轮廓线 2 代码 2.1 main.ts var start = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);v

DX-11A信号继电器 0.5A 柜内板前接线 约瑟JOSEF

DX-11,11A,11B,11C型信号继电器 DX-11信号继电器 DX-11B信号继电器 DX-11A信号继电器 DX-11C信号继电器 1 用途 该继电器用于直流操作的保护线路中&#xff0c;作为信号指示器。 2 结构和原理 该继电器具有电磁铁和带公共点的三付动合触点及一个信号牌&#xff0c;为电…

嵌入式Linux系统编程 — 5.6 Linux系统申请堆内存

目录 1 内存概念 1.1 什么是堆内存 1.2 内存分布 2 malloc、free在堆上分配与释放内存 2.1 malloc函数 2.2 free函数 2.3 示例程序 注意事项&#xff1a; 3 calloc分配内存 3.1 calloc函数介绍 3.2 示例程序 4 分配对齐内存 4.1 函数介绍 4.2 示例程序 1 内存概念…

推荐下载:Windows11 23H2专业工作站版!高效办公首选!

今天系统之家小编给需要高性能计算能力、高级安全功能和专业级应用程序支持的用户推荐一款操作系统&#xff0c;那就是Windows11 23H2专业工作站版系统&#xff0c;该系统经过优化&#xff0c;具有更强的数据处理能力和更高的安全性&#xff0c;还具有出色的兼容性&#xff0c;…