当前位置： 首页 > news >正文

11.（vue3.x+vite）组件间通信方式之ref与$parent、$children

news 2026/4/15 13:15:21

前端技术社区总目录（订阅之前请先查看该博客）

示例效果

在这里插入图片描述

注：
（1）ref 加在标签（div等）上，是拿到dom 对象
（2）ref加上组件上，拿到的是组件的引用
（3）让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露，另外让父组件获取子组件的数据或者方法需要通过defineExpose方法对外暴露。因为vue3中组件内部的数据对外“关闭的”，外部不能访问。
（4）$children在vue3已不再使用

父组件代码：

<template><div><div

相关文章：

11.（vue3.x+vite）组件间通信方式之ref与$parent、$children

前端技术社区总目录（订阅之前请先查看该博客） 示例效果 注： （1）ref 加在标签（div等）上，是拿到dom 对象 （2）ref加上组件上，拿到的是组件的引用 （3）让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露，另外让父组件获取子组件的数据或者方法需要通过d…...

编程日记 2023/11/12 0:46:31

[工业自动化-12]：西门子S7-15xxx编程 - PLC从站 - ET200 SP系列详解

目录 一、概述 1.1 概述 二、系统组成 2.1 概述 2.2 与主站的通信接口模块 2.3 总线适配器 2.4 基座单元 2.5 电子模块 2.6 服务器模块 一、概述 1.1 概述 PLC ET200 SP 是西门子&#xff08;Siemens&#xff09;公司生产的一款模块化可编程逻辑控制器&#xff08;PL…...

编程日记 2023/11/12 0:44:29

消息队列简介

消息队列 在认识rabbitMQ之前&#xff0c;我们需要先认识下消息队列。 消息队列&#xff0c;一般简称为MQ&#xff08;Message Queue&#xff09;。先不管消息(Message)这个词&#xff0c;先看看队列(Queue)。 队列就是一种先进先出的数据结构。 所以消息队列可以简单理解为&a…...

编程日记 2023/11/12 0:42:26

SQL中实现汉字的拼音首字母查询

由于汉语拼音首字母也就23个&#xff0c;该方法利用汉字字符按拼音字母排序的特点来生成对应的拼单首字母&#xff0c;只需找到这23个汉语拼音首字母中分别排序在第一的汉字生成23条临时表数据用于参照&#xff0c;即可简单实现汉字匹配拼音首字母 CREATE FUNCTION f_GetPyAcr…...

编程日记 2023/11/12 0:41:25

今天知道LiveData的ktx是真的香

主要还是认知问题&#xff0c;Android 官网从一开始就在推ktx&#xff0c;现在都已经2. 版本了&#xff0c;但是呢&#xff0c;因为之前没有从0开始写过一个Kotlin的APP&#xff0c;就陷入了一个JAVA 思维&#xff0c;在JAVA 中我们知道要做到像协程这么处理不是不能&#xff0…...

编程日记 2023/11/12 0:40:24

SpringBoot中的桥接模式

桥接模式是一种结构型设计模式&#xff0c;它的主要目的是通过将抽象部分与实现部分分离&#xff0c;提高系统的灵活性和可扩展性。在桥接模式中&#xff0c;有四个主要参与者&#xff1a;抽象类、具体抽象类、桥接类和具体类。 抽象类是定义了抽象方法的基类&#xff0c;这些…...

编程日记 2023/11/12 0:38:22

AI爆文变现脚本：易用且免费的自动写作脚本更新了

之前给大家分享的AI爆文变现写作脚本 由于时间仓促&#xff0c;加上我对很多东西不熟悉 免费版本对新手小白来说&#xff0c;安装部署起来是非常的困难 于是这几天我加班加点把整个软件的部署简化 现在无需复杂的环境配置安装&#xff0c;下载配置下就可以使用了。 免费版…...

编程日记 2023/11/12 0:37:21

代码随想录算法训练营Day 49 || 123.买卖股票的最佳时机III 、188.买卖股票的最佳时机IV

123.买卖股票的最佳时机III 力扣题目链接(opens new window) 给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意&#xff1a;你不能同时参与多笔交易&#xff08;你必须…...

编程日记 2023/11/12 0:36:19

threejs(11)-精通着色器编程（难点）2

一、shader着色器编写高级图案 小日本国旗 precision lowp float; varying vec2 vUv; float strength step(0.5,distance(vUv,vec2(0.5))0.25) ; gl_FragColor vec4(strength,strength,strength,strength);绘制圆 precision lowp float; varying vec2 vUv; float strength 1…...

编程日记 2023/11/12 0:35:19

配置cuda和cudnn出现 libcudnn.so.8 is not a symbolic link问题

cuda版本为11.2 问题如图所示&#xff1a; 解决办法&#xff1a; sudo ln -sf /usr/local/cuda-11.2/targets/x86_64-linux/lib/libcudnn_adv_train.so.8.1.1 /usr/local/cuda-11.2/targets/x86_64-linux/lib/libcudnn_adv_train.so.8 sudo ln -sf /usr/local/cuda-11.2/targ…...

编程日记 2023/11/12 0:32:14

“目标值排列匹配“和“背包组合问题“的区别和leetcode例题详解

1 目标值排列匹配 1.1 从目标字符串的角度来看&#xff0c;LC139是一个排列问题&#xff0c;因为最终目标子串的各个字符的顺序是固定的&#xff1f; 当我们从目标字符串 s 的角度来看 LC139 “单词拆分” 问题&#xff0c;确实可以认为它涉及到排列的概念&#xff0c;但这种…...

编程日记 2023/11/12 0:31:13

火星加载WMTS服务

这是正常的加载瓦片 http://192.168.1.23:8008/geoserver/mars3d/gwc/service/wmts?tilematrixEPSG%3A4326%3A7&layermars3d%3Abuffer&style&tilerow46&tilecol197&tilematrixsetEPSG%3A4326&formatimage%2Fpng&serviceWMTS&version1.0.0&…...

编程日记 2023/11/12 0:30:11

为什么要学习去使用云服务器，外网 IP能干什么，MAC使用Termius连接阿里云服务器。保姆级教学

目录 引言 可能有人想问为什么要学习云服务器&#xff1f; &#xff08;获取Linux环境&#xff0c;获得外网IP) 二、安装教程 引言 可能有人想问为什么要学习云服务器&#xff1f; &#xff08;获取Linux环境&#xff0c;获得外网IP) 1.虚拟机&#xff08;下策&#xff09; …...

编程日记 2023/11/12 0:29:10

VS c++多文件编译

前言&#xff1a;记录下我这个菜鸡学习的过程&#xff0c;如有错误恳请指出&#xff0c;不胜感激&#xff01; 1.简单多文件编译调试 文件目录&#xff1a; 编译&#xff1a; -g选项是告诉编译器生成调试信息&#xff0c;这样可以在程序崩溃或出现错误时更容易地进行调试。这…...

编程日记 2023/11/12 0:28:09

JVM关键指标监控(调优)

JVM 99%情况下不需要调优 使用性能更好的垃圾回收器 核心指标 针对单台服务器而言&#xff1a; jvm.gc.time: 每分钟GC耗时在1s以内 500ms以内最佳 jvm.gc.meantime: 每次YGC耗时在100ms以内&#xff0c;50ms以内最佳 jvm.fullgc.count: FGC(老生代垃圾回收)最多几小时1次&…...

编程日记 2023/11/12 0:27:08

【Proteus仿真】【Arduino单片机】LCD1602-IIC液晶显示

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用PCF8574、LCD1602液晶等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602液晶显示各种效果。 二、软件设计 /* 作者&#xff1a;嗨小…...

编程日记 2023/11/12 0:25:04

skynet学习笔记03— 服务

01、API newservice(name, ...)&#xff1a; 阻塞的形势启动一个名为 name 的新服务&#xff0c;待start函数执行完后会返回这个服务的地址。uniqueservice(name, ...)&#xff1a;针对于当前节点&#xff0c;启动一个唯一服务&#xff08;相当于单例&#xff09;&#xff0c;…...

编程日记 2023/11/12 0:23:01

34 Feign最佳实践

2.4.2.抽取方式 将Feign的Client抽取为独立模块&#xff0c;并且把接口有关的POJO、默认的Feign配置都放到这个模块中&#xff0c;提供给所有消费者使用。 例如&#xff0c;将UserClient、User、Feign的默认配置都抽取到一个feign-api包中&#xff0c;所有微服务引用该依赖包…...

编程日记 2023/11/12 0:22:00

软文推广中如何搭建媒体矩阵

媒体矩阵简单理解就是在不同的媒体平台上&#xff0c;根据运营目标和需求&#xff0c;建立起全面系统的媒体布局&#xff0c;进行多平台同步运营。接下来媒介盒子就来和大家聊聊&#xff0c;企业在软文推广过程中为什么需要搭建媒体矩阵&#xff0c;又该如何搭建媒体矩阵。 一、…...

编程日记 2023/11/12 0:20:59

Unity地面交互效果——5、角色足迹的制作

大家好&#xff0c;我是阿赵。   之前几篇文章&#xff0c;已经介绍了地面交互的轨迹做法。包括了法线、曲面细分还有顶点偏移。Shader方面的内容已经说完了&#xff0c;不过之前都是用一个球来模拟轨迹&#xff0c;这次来介绍一下&#xff0c;怎样和角色动作结合&#xff0c…...

编程日记 2023/11/12 0:19:58

Vue-Awesome构建流程解密：从SVG到Vue组件的完整转换

Vue-Awesome构建流程解密&#xff1a;从SVG到Vue组件的完整转换 【免费下载链接】vue-awesome Awesome SVG icon component for Vue.js, built-in with Font Awesome icons. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-awesome Vue-Awesome是一款为Vue.js打造的强…...

编程新知 2026/4/15 12:58:05

Phi-3-mini-4k-instruct-gguf快速部署：仅需1条命令启动网页UI，支持中文提示词直输

Phi-3-mini-4k-instruct-gguf快速部署&#xff1a;仅需1条命令启动网页UI&#xff0c;支持中文提示词直输 1. 模型简介 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个经过优化的模型特别适合以下中文场景&#xff1a; 智能问答文本改写与…...

编程新知 2026/4/15 11:34:43

VCS仿真中xprop选项的实战配置指南：从基础到高级用法

VCS仿真中xprop选项的实战配置指南&#xff1a;从基础到高级用法 在芯片设计验证领域&#xff0c;X态传播仿真是确保设计可靠性的关键环节。VCS作为业界主流的仿真工具&#xff0c;其xprop选项的灵活配置直接影响验证效率和准确性。本文将带您从基础配置到高级应用&#xff0c;…...

编程新知 2026/4/15 10:27:11

从DS3231到RX8025T：手把手教你为Arduino点阵时钟更换低成本高精度RTC模块

从DS3231到RX8025T&#xff1a;低成本高精度RTC模块的完整迁移指南 1. 为什么选择RX8025T替代DS3231 在电子创客项目中&#xff0c;实时时钟模块&#xff08;RTC&#xff09;的选择往往需要在精度、成本和功能之间寻找平衡点。DS3231以其出色的精度&#xff08;2ppm&#xff…...

编程新知 2026/4/15 10:25:09

如何记录SQL谁修改了数据_通过触发器获取用户Session信息

数据库触发器无法直接获取真实业务用户&#xff0c;需应用层透传用户标识&#xff08;如会话变量、自定义配置、CONTEXT_INFO等&#xff09;&#xff0c;数据库侧配合读取&#xff0c;所有方案均依赖应用主动设置&#xff0c;无自动识别能力。MySQL 触发器里拿不到 USER() 或 C…...

编程新知 2026/4/15 10:11:05

智能项目员中的进度控制与资源协调

智能项目员中的进度控制与资源协调 在当今快速发展的数字化时代&#xff0c;智能项目员已成为企业项目管理中不可或缺的角色。他们不仅需要掌握传统项目管理的核心技能&#xff0c;还需借助智能化工具实现高效的进度控制与资源协调。如何通过技术手段优化项目流程、避免资源浪…...

编程新知 2026/4/15 9:58:44

【AI自动化实战】Docker + n8n + MCP 三剑合璧：构建私有化AI智能体工具箱

1. 为什么需要私有化AI智能体工具箱&#xff1f; 最近两年AI技术爆发式发展&#xff0c;但很多企业面临一个尴尬局面&#xff1a;既想享受AI自动化带来的效率提升&#xff0c;又担心数据隐私和安全问题。我在为某金融客户部署自动化系统时就遇到过这种情况——他们连SaaS版的Ch…...

编程新知 2026/4/15 9:11:24

【Hadoop进阶】Hadoop生态圈实战指南：从核心组件到典型应用场景解析

1. Hadoop生态圈的核心价值与架构设计 第一次接触Hadoop的人常会被它庞大的生态体系吓到&#xff0c;但理解其设计哲学后就会发现非常直观。我在2013年第一次部署Hadoop集群时&#xff0c;最惊讶的是它用普通服务器就能搭建起PB级数据处理能力。Hadoop生态圈本质上是用分布式架…...

编程新知 2026/4/15 8:09:33

Blender 3MF插件终极指南：5步实现3D打印工作流优化

Blender 3MF插件终极指南&#xff1a;5步实现3D打印工作流优化 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat Blender3mfFormat插件是Blender生态系统中专为3D打印工作流…...

编程新知 2026/4/15 8:05:32

从零开始的大数据之路（6）- 三分钟安装部署好Datax

目录 datax的安装包&#xff1a; 从零开始的大数据之路 &#xff08;0&#xff09;的葵花宝典 -- 安装包分享 -- 错过就是罪过 [持续更新分享]-CSDN博客 1、上传datax安装包到服务器并分发到其他服务器 2、解压Datax 3、测试Datax 4、测试失败 datax报错解决 解决 再次…...

编程新知 2026/4/15 7:35:18