vue3中子组件获取父组件的name,父组件不做修改动作

在 Vue 3 中,子组件若要获取父组件的 name,且父组件不做额外操作,可以借助 getCurrentInstance 来实现。getCurrentInstance 方法能获取当前组件实例,进而访问其父组件实例及其属性。
示例代码
父组件(ParentComponent.vue)

<template>
  <div>
    <h1>这是父组件</h1>
    <ChildComponent />
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 定义父组件名称
defineComponent({
  name: 'ParentComponent'
});
</script>

子组件(ChildComponent.vue)

<template>
  <div>
    <h2>这是子组件</h2>
    <p>父组件的名称是: {{ parentName }}</p>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';

// 获取当前组件实例
const instance = getCurrentInstance();
// 获取父组件的 name
const parentName = instance?.parent?.type.__name;
</script>

代码解释
父组件:
运用 defineComponent 定义父组件,并且指定 name 为 ParentComponent。
在模板里引入并使用子组件 ChildComponent。
子组件:
借助 getCurrentInstance 获取当前组件实例。
通过 instance?.parent 访问父组件实例。
利用 instance?.parent?.type.__name 获取父组件的 name。
把获取到的父组件 name 展示在模板中。
注意事项
getCurrentInstance 仅能在 setup 函数或者 <script setup> 中使用。
由于 getCurrentInstance 可能返回 null,所以在访问父组件实例及其属性时,要使用可选链操作符 ?. 来避免出现空指针错误。
----来自豆包

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

本地部署pangolin获取谱系,从而达到预测新冠的流行趋势

步骤 1&#xff1a;安装Docker 注&#xff1a;此步骤忽略&#xff0c;可通过Docker官网对于文档进行安装,地址如下 Docker: Accelerated Container Application Developmenthttps://www.docker.com/ 步骤 2&#xff1a;拉取Pangolin镜像 docker pull staphb/pangolin:latest 步…

HarmonyOS Next 属性动画和转场动画

HarmonyOS Next 属性动画和转场动画 在鸿蒙应用开发中&#xff0c;动画是提升用户体验的关键要素。通过巧妙运用动画&#xff0c;我们能让应用界面更加生动、交互更加流畅&#xff0c;从而吸引用户的注意力并增强其使用粘性。鸿蒙系统为开发者提供了丰富且强大的动画开发能力&…

K8S学习之基础十:k8s中初始化容器和主容器

init容器和主容器 init容器和主容器的区别 初始化容器不支持 Readinessprobe&#xff0c;因为他们必须在pod就绪之前运行完成每个init容器必须运行成功&#xff0c;下一个才能够运行 # 定义两个初始化容器&#xff0c;完成后再运行主容器 vi pod-init.yaml apiVersion: v1 …

PostgreSQL 安装与使用

下载地址: EDB: Open-Source, Enterprise Postgres Database Management 安装图形化安装界面安装。安装完后将bin目录配置到系统环境变量 执行psql -h localhost -p 5432 -U postgres 密码在安装过程中设置的 ​ 0、修改密码 ALTER USER sonar WITH PASSWORD 123456; 1、新…

WPF高级 | WPF 应用程序部署与发布:确保顺利交付到用户手中

WPF高级 | WPF 应用程序部署与发布&#xff1a;确保顺利交付到用户手中 一、前言二、部署与发布基础概念2.1 部署的定义与目的2.2 发布的方式与渠道2.3 部署与发布的关键要素 三、WPF 应用程序打包3.1 使用 Visual Studio 自带的打包工具3.2 使用第三方打包工具 四、发布到不同…

Mybatis 的关联映射(一对一,一对多,多对多)

前言 在前面我们已经了解了&#xff0c;mybatis 的基本用法&#xff0c;动态SQL&#xff0c;学会使用mybatis 来操作数据库。但这些主要操作还是针对 单表实现的。在实际的开发中&#xff0c;对数据库的操作&#xff0c;常常涉及多张表。 因此本篇博客的目标&#xff1a;通过my…

在Linux中开发OpenGL——检查开发环境对OpenGL ES的支持

由于移动端GPU规模有限&#xff0c;厂商并没有实现完整的OpenGL特性&#xff0c;而是实现了它的子集——OpenGL ES。因此如果需要开发的程序要支持移动端平台&#xff0c;最好使用OpenGL ES开发。 1、 下载支持库、OpenGL ES Demo 1.1、下载PowerVRSDK支持库作为准备&#xff…

【Python项目】基于深度学习的电影评论情感分析系统

【Python项目】基于深度学习的电影评论情感分析系统 技术简介&#xff1a;采用Python技术、Flask框架、MySQL数据库、Word2Vec模型等实现。 系统简介&#xff1a;该系统基于深度学习技术&#xff0c;特别是Word2Vec模型&#xff0c;用于分析电影评论的情感倾向。系统分为前台…

SLAM评估工具安装及使用EVO(Ubuntu20.04安装evo)--缺少 onnx 库还有Pandas 版本不兼容解决

介绍一下我的是ubuntu20.04.机载电脑是orinnx&#xff0c;通过源码烧写的系统。 首先打开终端&#xff0c;输入 pip install evo --upgrade --no-binary evo 安装过程中出现如下问题 缺少 onnx 库还有Pandas 版本不兼容&#xff0c; ONNX&#xff08;Open Neural Network E…

Arcgis中添加脚本工具箱

文章目录 准备资料1、打开arcmap2、找到目录窗口3、复制粘贴工具箱的路径4、添加或者确认python脚本路径准备资料 (1)工具箱 (2)python脚本 1、打开arcmap 2、找到目录窗口 3、复制粘贴工具箱的路径 4、添加或者确认python脚本路径 脚本上右键属性(注意:脚本内容和路径…

第二次CCF-CSP认证(思路及源码)

第二次CCF-CSP认证 第一道&#xff08;easy&#xff09;思路及AC代码 第二道&#xff08;easy&#xff09;基本思路及AC代码 第三道&#xff08;mid&#xff09;基本思路及AC代码solution 1 (模拟)solution 2&#xff08;KMP&#xff09; 第一道&#xff08;easy&#xff09; 题…

RAGflow 无法加载Embedding模型

部署0.17版本的RAGflow&#xff0c;在模型列表中已经添加了嵌入模型&#xff0c;但是知识库配置时&#xff0c;嵌入模型灰显&#xff1a; 问题原因&#xff1a; 提前上传了一个文档&#xff0c;在知识库有文档之后&#xff0c;就不能够修改嵌入模型了。删除文档之后&#xff0…

C++ Primer 拷贝、赋值与销毁

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…

【够用就好006】如何从零开发游戏上架steam面向AI编程的godot独立游戏制作实录001流程

记录工作实践 这是全新的系列&#xff0c;一直有个游戏制作梦 感谢AI时代&#xff0c;让这一切变得可行 长欢迎共同见证&#xff0c;期更新&#xff0c;欢迎保持关注&#xff0c;待到游戏上架那一天&#xff0c;一起玩 面向AI编程的godot独立游戏制作流程实录001 本期是第…

计算机毕业设计Python+DeepSeek-R1大模型空气质量预测分析(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

【文生图】windows 部署stable-diffusion-webui

windows 部署stable-diffusion-webui AUTOMATIC1111 stable-diffusion-webui Detailed feature showcase with images: 带图片的详细功能展示: Original txt2img and img2img modes 原始的 txt2img 和 img2img 模式 One click install and run script (but you still must i…

单片机项目复刻需要的准备工作

一、前言 复刻单片机的项目的时候&#xff0c;有些模块是需要焊接的。很多同学对焊接没有概念。 这里说一下做项目的基本工具。 比如&#xff1a;像这种模块&#xff0c;都需要自己焊接了排针才可以链接的。 二、基本模块 2.1 单排排针 一些模块买回来是没有焊接的&#x…

微服务概览与治理

微服务概览与治理 1. 微服务架构的演进 1.1 引言 当我们讨论微服务时&#xff0c;我们并不是在谈论一种炫酷的新技术&#xff0c;而是在寻找一种更好的方式来组织我们的软件系统&#xff0c;使其更易扩展、更易维护。软件架构的发展历程往往是对业务需求和技术挑战的回应。从…

《代码随想录第五十七天》——孤岛的总面积、沉没孤岛、水流问题、建造最大岛屿

《代码随想录第五十七天》——孤岛的总面积、沉没孤岛、水流问题、建造最大岛屿 本篇文章的所有内容仅基于C撰写。 1. 孤岛的总面积 1.1 题目 孤岛的总面积 题目描述 给定一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的矩阵&#xff0c;岛屿指…

IntelliJ IDEA 华为云远程开发配置步骤

1.连接华为云主机,点击New Project 2.输入用户名与主机IP后连接 3.输入密码授权连接 4.继续连接 注意,远程主机内存最少要4G才能启动后端IDE 5.连接华为云主机成功,下载IDE并连接 选择项目位置