Vue3父组件如何访问子组件属性和方法

本篇内容主要是父组件如何访问子组件的属性和方法

文章目录


子组件

//son.vue代码const list = (info) =>{console.log(info)
}const name = ref("XXXX")//子组件向父组件暴露了一个方法,然后父组件就可以去使用子组件里面的一些属性和方法了
//子组件向父组件暴露了一个参数,一个方法
defineExpose({ show ,list,name});

父组件

//引入子组件
<son ref="deliverRef"></son>
const deliverRef = ref();//父组件在点击按钮的时候就可以拿到子组件的属性和方法
const btnClick = () => {deliverRef.value.list("helloWorld")console.log(deliverRef.value.name)
};

最终结果

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

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

相关文章

奇安信停服,国内还有什么可用的高防么?

这里写自定义目录标题 背景DDOS怎么办&#xff1f;方案推荐总结 背景 继前段时间百度云加速通知免费服务&#xff0c;6月底奇安信也将停止服务&#xff0c;到时候国内将几乎不存在免费好用的高防CDN了&#xff1b;类似的事情还有阿里云和腾讯云的一年期免费SSl证书也都停止供应…

C++:SLT容器-->deque

C:SLT容器-->deque 1. 构造函数2. deque 赋值操作3. deque 大小操作4. deque 插入和删除5. deque 容器数据存取6. deque 排序操作 双端数组&#xff0c;可以对头部和尾部进行插入删除操作 需要导入头文件#include <deque> 1. 构造函数 deque deqT; // 默认构造函数 de…

vue-2 组件传值

组件关系分类 父子关系非父子关系 父子通信流程 父组件通过props将数据传递给子组件 给子组件以添加属性的方式传值子组件内部通过 props 接收模板中直接使用 props 接收的值 父组件 Parent.vue <template><div class"parent" style"border: 3px s…

CST Studio Suite 2020 软件安装教程、安装包下载

CST Studio Suite 2020 安装教程 安装包下载 复制链接在浏览器打开 https://www.qqres.com/3150.html CST Studio Suite 是由Dassault Systmes公司开发的一套电磁场仿真软件。它应用于电子、通信、天线设计、射频与微波、电磁兼容性 (EMC)、电磁干扰 (EMI) 等领域。 CST St…

Unity协程学习心得

前言 个人总结的一些Unity协程学习心得&#xff0c;如有不对请在评论区指出一起学习&#xff01;感谢。 在Unity编程中谈到异步逻辑&#xff0c;可以考虑使用协程来实现。协程&#xff08;Coroutine&#xff09;在Unity中的主要作用就是把一个任务暂停&#xff08;挂起&#…

智慧园区建设方案(Word)

1. 楼栋管理 2. 物业管理 3. 安防管理 4. 门禁管理 5. 停车管理 6. 能源管理 7. 环保管理 8. 园区生活服务 9. 招商管理 10. 收费中心 11. 园区地图 12. 门户网站 软件整套原件获取&#xff1a;本文末个人名片。

使用DPO微调大模型Qwen2详解

简介 基于人类反馈的强化学习 (Reinforcement Learning from Human Feedback&#xff0c;RLHF) 事实上已成为 GPT-4 或 Claude 等 LLM 训练的最后一步&#xff0c;它可以确保语言模型的输出符合人类在闲聊或安全性等方面的期望。但传统的RLHF比较复杂&#xff0c;且还需要奖励…

BabylonJS 6.0文档 Deep Dive 动画(四):通过动画排序制作卡通片

一种最为直接的方法是为每个动画剪辑&#xff08;Animatin Clip&#xff09;指定开始时间&#xff0c;最终形成一个卡通动画&#xff08;Cartoon&#xff09;。 1. 设计 1.1 概述 动画的脚本如下&#xff1a; 摄像机显示了一栋带门的建筑物。摄像机靠近门并停止。门打开&am…

掌控数据流:深入解析 Java Stream 编程

Java 8 引入了一种新的抽象称为流&#xff08;Stream&#xff09;&#xff0c;它可以让你以一种声明的方式处理数据。Java 8 Stream API 可以极大提高 Java 程序员的生产力&#xff0c;使代码更简洁&#xff0c;更易读&#xff0c;并利用多核架构进行外部迭代。这里将详细介绍 …

【NoSQL数据库】Redis简介

Redis Redis简介 Redis关系型数据库和非关系型数据库Redis 简介redis速度快的原因 Redis 配置Linux 源码安装redis命令工具 关系型数据库和非关系型数据库 关系型数据库&#xff08;Relational Database&#xff09;和非关系型数据库&#xff08;Non-Relational Database&…

重学Spring总结

1、Spring框架的诞生 文章目录 1、Spring框架的诞生1、BeanFactory 快速入门1.1、BeanFactory完成了loC思想的实现&#xff1a;1)导入Spring相关的依赖&#xff1a;2)定义Uservice接口及其UserviceImpl实现类&#xff1b;3)创建Bean的配置资源文件&#xff0c;文件名最好为&…

新材料正不断推动模具3D打印行业发展

随着工业4.0的浪潮席卷全球&#xff0c;模具制造行业也迎来了技术革新的新纪元。3D打印技术以其独特的制造优势&#xff0c;正逐渐在模具制造领域崭露头角。然而&#xff0c;要实现模具3D打印技术的广泛应用&#xff0c;高性能的打印材料是不可或缺的关键因素。 材料是模具3D打…

【Golang】Map 稳定有序遍历的实现与探索:保序遍历之道

【Golang】Map 稳定有序遍历的实现与探索&#xff1a;保序遍历之道 大家好 我是寸铁&#x1f44a; 总结了一篇【Golang】Map 稳定有序遍历的实现与探索&#xff1a;保序遍历之道✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言&#x1f34e; 在计算机科学中&#xff0c;数据结…

【内存管理】内存管理概述

文章目录 内存管理硬件结构早期内存的使用方法分段分页逻辑地址&#xff0c;线性地址&#xff08;intel架构&#xff09;虚拟地址物理地址结构图 虚拟地址到物理地址的转换内存管理总览系统调用vm_area_struct缺页中断伙伴系统slab分配器页面回收反向映射KSMhuge page页迁移内存…

[AI Google] 使用 Gemini 取得更多成就:试用 1.5 Pro 和更多智能功能

总结 Google 正在为超过 35 种语言的 Gemini Advanced 订阅者推出 Gemini 1.5 Pro。此次更新包括 100 万个 token 的上下文窗口、改进的数据分析功能和增强的多模态图像理解。新功能包括用于自然对话的 Gemini Live、先进的规划工具和可定制的 Gems。更新还集成了更多 Google …

【MySQL】(基础篇五) —— 排序检索数据

排序检索数据 本章将讲授如何使用SELECT语句的ORDER BY子句&#xff0c;根据需要排序检索出的数据。 排序数据 还是使用上一节中的例子,查询employees表中的last_name字段 SELECT last_name FROM employees;输出结果&#xff1a; 发现其输出并没有特定的顺序。其实&#xf…

电子电气架构 --- 信息安全测试模糊测试

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

Objective-C的初始化方法中,应该如何读写属性

除非有明确的原因需要使用setter, getter, 否则总是应该直接访问, 也就是直接使用实例变量&#xff08;也称为 iVar&#xff09;来读写数据 理由&#xff1a; 避免子类覆盖setter方法的影响&#xff1a;若在初始化方法中使用setter方法, 使用此方法实例化子类, 可能会调用子类…

纯理论容器实现的原理

近期在复习容器的原理&#xff0c;希望这篇文章可以帮助到大家。 一、什么是容器&#xff1f; 容器本质上就是主机上的一个进程。这个进程拥有自己的用户空间并且和主机共享内核空间。 容器内的进程可以通过系统调用与内核进行交互&#xff0c;使用内核提供的各种功能和资源。…

刷代码随想录有感(99):动态规划——使用最小花费爬楼梯

题干&#xff1a; 代码&#xff1a; class Solution { public:int minCostClimbingStairs(vector<int>& cost) {vector<int>dp(cost.size() 1);dp[0] 0;dp[1] 0;for(int i 2; i < cost.size(); i){dp[i] min(dp[i - 1] cost[i - 1], dp[i - 2] cost…