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

已于 2023-09-19 16:58:58 修改
阅读量238 收藏 2
点赞数 2
分类专栏： 前端技术社区 文章标签： vue.js 前端 javascript vue3.x+vite 组件间通讯 ref parent
于 2023-09-18 14:49:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60387551/article/details/132977993
版权
前端技术社区 专栏收录该内容
42 篇文章 1 订阅 ¥49.90 ¥99.00
订阅专栏
本文介绍了在Vue3.x和Vite环境下，如何使用ref和$parent进行组件间的通信。强调了ref在标签和组件上的不同用法，以及在Vue3中如何通过defineExpose暴露子组件数据和方法。同时指出$children在Vue3中已不推荐使用。
摘要由CSDN通过智能技术生成

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

示例效果

在这里插入图片描述

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

父组件代码：

<
了解本专栏 订阅专栏 解锁全文
GIS之家家长
关注
专栏目录
订阅专栏
10.（vue3.x+vite）父子组件传参
GIS之家家长
09-14 147
10.（vue3.x+vite）父子组件传参
Vue项目中常见问题(71)组件通信-$children与$parent
qq_46368050的博客
05-29 440
location / { root /root/lxh2/www/shangpinhui/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://gmall-h5-api.atguigu.cn; }
vue.js之父子组件通信方式三（$parent和$children）
陈小陈的博客
01-02 4446
父子组件通信方式三 $parent 获取当前组件的父组件实例 $children 获取当前组件的子组件实例 不推荐使用这种方式进行组件通信 案例父组件传给子组件title,在父子间里获取子组件的实例和数据 子组件 <template> <div> <h1> {{title}} <button @click="handleClick">emit</button>
vue3 封装el-table时，构造$children（类式写法）
qq_43519131的博客
09-28 1177
由于业务需求（组件封装），需要在获取el-table下面的实例在 vue2.x 当中直接使用就可以获取到该实例但是 vue3.x 弃用了$children，官方建议使用$ref获取子组件实例，由于是通过插槽形式插入，且当数过多时，不可能专门为每一个都添加ref，在网上搜索之后发现有人建议使用$slot获取插入的组件实例，但是获取到的实例信息不足，因此决定构造一个“$children”出来。
Vue中的$children和$refs
weixin_41306892的博客
08-04 1356
1、Vue中的$children和$refs用于父组件获取子组件对象。 2、this.$children获取当前组件的所有子组件对象。通过下标访问对应的具体组件。（用得较少） 3、子组件标签上添加属性ref="aaa"时，可以通过this.$refs.aaa获取该组件。 ...
Vue 3 迁移策略笔记—— 第5节：移除 $children
Jay的博客
01-27 4342
前言 本笔记主要基于官方文档《[迁移策略——移除 $children》汇总而来。如有理解出入，请以官方文档为主。 概述 在 Vue 3.x 中，将移除且不再支持 $children 。 Vue 2.x 中的 $children 官方描述： vm.$children 类型：Array<Vue instance> 只读 详细： 当前实例的直接子组件。**需要注意 $children 并不保证顺序，也不是响应式的。**如果你发现自己正在尝试使用 $children 来进行数据绑定，考
11.（vue3.x+vite）组件间通信方式之ref与$parent、$children.rar
09-19
在这个"11.（vue3.x+vite）组件间通信方式之ref与$parent、$children.rar"的压缩包中，我们可能会看到如何利用新的特性来实现组件间的通信。以下是对这些知识点的详细说明： 1. **Vue3.x**：Vue3.x是Vue.js的最新...
3.（vue3.x+vite）el-tree组件（数组结构数据转树结构数据）
GIS之家家长
09-14 162
3.（vue3.x+vite）el-tree组件（数组结构数据转树结构数据）
vue3没了$children，如何获取子组件？？？
文摘资讯
11-15 1367
vue3没了$children，如何获取子组件？？？$children 移除概览$children 实例 property 已从 Vue 3.0 中移除，不再支持。2.x 语法在 2.x ...
18.（vue3.x+vite）组件间通信方式之v-model
地图之家
12-13 188
18.（vue3.x+vite）组件间通信方式之v-model
vue2和vue3的通信传值方式
weixin_46084100的博客
07-15 1200
vue2和vue3的组件通信方式
vue3父子组件通过$parent与ref通信
xinbaiyu的博客
11-27 658
【代码】vue3父子组件通过$parent与ref通信。
vuejs之父子组件访问【$refs】【$children】
CamphorBlossom的博客
08-11 2943
​$refs（reference 缩略）是一个对象，持有当前组件中注册过refattribute的所有 DOM 元素和组件实例。 ​
Vue中的$children与$parent讲解
weixin_57677300的博客
01-31 1681
$children与$parent
Vue3 路由精讲：掌握 children 属性打造多层次嵌套导航
andy_68147772的博客
12-19 1451
在Vue 3中，当你使用Vue Router创建路由配置时， children属性允许你为某个路由定义嵌套路由。这意味着你可以在父路由下设置子路由，从而构建出具有层级结构的URL路径。 这里是一
vue3父组件调用子组件中的方法
最新发布
qq_42238554的博客
03-20 331
父组件需要调用子组件中的方法可以使用ref。
VUE2 VUE3 父子、隔代、兄弟组件的传值方式
热门推荐
alokka的博客
02-12 2万+
时隔一年多 vue 又增加了新的方法 2.2.0 新增 provide 和 inject （隔代传值） 2.4.0 新增 \$attrs 和 \$listeners （隔代传值）
vue3获得子组件的值
qq_34631220的博客
08-04 644
【代码】vue3获得子组件的值。
Vue父子组件通信：$parent与$children深度解析
"vue父子组件间引用之$parent、$children" 在Vue.js框架中，父子组件间的通信是非常关键的一部分，因为它允许组件之间有效地共享数据和交互。本篇内容主要涉及了两个内置属性 `$parent` 和 `$children`，它们提供了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS之家家长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值