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

news/2025/3/10 16:44:17/

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

<template><div><h1>这是父组件</h1><ChildComponent /></div>
</template><script setup>javascript">
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>javascript">
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,所以在访问父组件实例及其属性时,要使用可选链操作符 ?. 来避免出现空指针错误。
----来自豆包


http://www.ppmy.cn/news/1578129.html

相关文章

人工智能里的深度学习指的是什么?

深度学习&#xff08;Deep Learning, 简称DL&#xff09;是机器学习领域的一个重要分支&#xff0c;它通过构建和训练深层神经网络模型&#xff0c;从大量数据中自动学习和提取特征&#xff0c;以实现复杂任务的自动化处理和决策。以下是关于深度学习的详细介绍&#xff1a; 一…

阿里发布新开源视频生成模型Wan-Video,支持文生图和图生图,最低6G就能跑,ComFyUI可用!

Wan-Video 模型介绍&#xff1a;包括 Wan-Video-1.3B-T2V 和 Wan-Video-14B-T2V 两个版本&#xff0c;分别支持文本到视频&#xff08;T2V&#xff09;和图像到视频&#xff08;I2V&#xff09;生成。14B 版本需要更高的 VRAM 配置。 Wan2.1 是一套全面开放的视频基础模型&…

Qt:多线程

目录 初识Qt多线程 QThread常用API QThread的使用 Qt中的锁 条件变量和信号量 初识Qt多线程 Qt 多线程 和 Linux 中的线程本质是一个东西 Linux 中学过的 多线程 APl&#xff0c;Linux 系统提供的 pthread 库 Qt 中针对系统提供的线程 API 重新封装了 C11 中&#xff0c;…

【Conda】Windows安装conda/Anaconda环境

安装conda并配置powershell 访问该网址&#xff0c;下载安装即可&#xff1a; Anaconda下载 安装完成后&#xff0c;打开Anaconda&#xff0c;并访问Powershell Prompt 弹出Windows Terminal&#xff0c;并正常进入Conda 【非必须】如果不是通过Windows Terminal打开&#x…

TRPO中的Hessian-Free Optimization(两次梯度反向传播计算海森矩阵)

1.优点 无需显式构建和存储海森矩阵&#xff0c;大大降低了计算和存储成本。在深度学习中的大型神经网络&#xff0c;参数数量可能达到数百万甚至更多&#xff0c;避免显式计算海森矩阵可以使训练过程在计算资源有限的情况下仍然能够高效进行。 通过两次梯度反向传播计算海森矩…

2020年蓝桥杯Java B组第二场题目+部分个人解析

#A&#xff1a;门牌制作 624 解一&#xff1a; public static void main(String[] args) {int count0;for(int i1;i<2020;i) {int ni;while(n>0) {if(n%102) {count;}n/10;}}System.out.println(count);} 解二&#xff1a; public static void main(String[] args) {…

《基于Hadoop的出租车需求预测系统设计与实现》开题报告

目录 一、选题依据 1.选题的意义 2.国内外研究现状 3.应用价值 二、研究内容 1&#xff0e;主要研究内容 2&#xff0e;拟采取的研究方法、技术路线、实施方案及可行性分析 &#xff08;1&#xff09;拟采取的研究方法 (2)技术路线 (3)实施方案 (4)可行性分析 三、参…

贪心算法一

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是贪心算法&#xff0c;并且掌握贪心算法。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! >…