vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用

最新推荐文章于 2024-07-22 11:34:18 发布
转载 最新推荐文章于 2024-07-22 11:34:18 发布 · 269 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.jianshu.com/p/8840c089d60a
文章标签：

#vue.js #前端 #javascript #vue

本文介绍了如何在Vue应用中使用$refs操作子组件，$parent直接访问父组件，$root遍历祖先组件，以及$children操作子组件数组。重点讲解了ref的使用和组件间的通信方式。
  • this.$refs
    是一个对象，持有已注册过的所有子组件。
    ref为子组件指定一个名称，通过this.$refs.ref指定的子组件名称 即可获得对该子组件的操作（包括data中定义的数据和methods中定义的方法）
  • this.$parent
    可以直接操作当前组件的父组件
  • this.$root
    可以直接操作当前组件的所有祖先组件的根组件
  • this.$children
    是一个数组，可以操作当前组件的所有子组件
秃叽叽
关注
vue父子组件间引用：$parent、$children
flying meng的菜鸟居
05-18 6376
vue中提到【父子组件】，则一定会想到我们常用的父子组件通信：props+$on()、$emit() ，如图： 也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit将数据从子组件传到父组件，以此循环引用。 但是在另一些场景下，我们可能想要比如（在父组件中）拿到子组件对象，然后直接操作其中数据，去实现一些功能，比如方法的调用。 有时候我们需要父
Vue项目中常见问题(71)组件通信-$children与$parent
qq_46368050的博客
05-29 535
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中的this.$parent
科技向善
04-20 2826
需要注意的是，使用this.$parent来访问父组件的数据和方法并不是一个好的做法，因为它会使子组件和父组件耦合在一起，使得代码难以维护和复用。使用provide和inject可以让父组件向子组件传递数据和方法，而不需要使用this.$parent来访问父组件。如果子组件需要调用父组件的方法，可以使用this.$parent.someMethod()来调用方法。可以用来获取组件的父实例，可以在子组件中使用它来访问父组件的数据和方法。例如，如果子组件需要访问父组件的数据，可以使用。
vue 里 this.$parent 作用
突维
05-15 4936
this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！
vue父子组件间传值(props)
weixin_30415801的博客
05-17 301
先定义一个子组件，在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { ...
vue的this.$parent的使用
qq_42264793的博客
09-24 1万+
vue组件this.$parent 在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件) 一、在实例中 this.$parent 写在组件里面,外部实例调用此组件,则其指向vue实例(这里是调用组件的实例),你可以在组件中调用 data,methods: //例子·???? this.$parent.list;//数据(模拟) this.$parent.request();//方法(
vue2的this.$parent.$parent.$parent.$refs
09-01
- *2* *3* [vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用](https://blog.csdn.net/weixin_44684303/article/details/124748102)[target="_blank" data-report-click={"spm":"1018.2226....
vue3中.$parent.$parent.$parent.$refs
09-01
- *2* *3* [vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用](https://blog.csdn.net/weixin_44684303/article/details/124748102)[target="_blank" data-report-click={"spm":"1018.2226....
this.$refs是什么意思
08-08
引用中提到，this.$refs是一个...此外，Vue还提供了其他的内置属性，如this.$parent用于操作当前组件的父组件，this.$root用于操作当前组件的所有祖先组件的根组件，以及this.$children可以操作当前组件的所有子组件。
实例详解vue中的$root和$parent
10-17
主要介绍了vue中的$root和$parent ，本文通过文字实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue $root、$parent、$refs
weixin_34301132的博客
05-22 432
Vue处理边界parent、$refs 下面的功能都是有风险的，尽量避免使用 Vue 子组件可以通过 $root 属性访问父组件实例的属性和方法 <div id="app"> <root-obj></root-obj> </div> Vue.component('root-obj', { data(...
vue的$parent属性
热门推荐
qq_41629522的博客
07-01 1万+
1.首先 一般默认的来说，我们带 $ 符号的我们基本默认是vue实例对象身上的也就是 vue中的 this，我们可以console一下this， 这上面有很多的属性，我们比较常用的 有$refs , $attrs, tips: 我们绑定的时候应该是单数形式比如： $ref 获取时候应该是复数形式。 2. $refs 让我们可以在父组件中进行操作子组件的数据以及方法。 $parents 让我们可以在子组件中对父组件的data和方法操作。 ...
本文介绍了vue组件 $children,$refs，$parent的使用
GoodIdea
07-06 686
如果项目很大，组件很多，怎么样才能准确的、快速的寻找到我们想要的组件了？？ 1）$refs 首先你的给子组件做标记。demo ：&lt;firstchild ref="one"&gt;&lt;/firstchild&gt; 然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数 2）$children 他返回的是一个组件...
vue中的$parent和$child
最新发布
m0_57836225的博客
07-22 1821
而父组件可以通过 $children 来获取子组件的实例，从而访问子组件的属性或调用子组件的方法。例如在子组件的方法中，可以使用 this.$parent.xxx 来获取父组件的属性或调用父组件的方法。在 Vue 中， $parent 表示当前组件的父组件实例，而 $children 表示当前组件的直接子组件实例集合（是一个无序的数组）。在上述示例中，子组件通过 this.$parent 获取到父组件实例，进而访问父组件的 msg 属性和 fun 方法。// 获取到所有的子组件。// 调用子组件的方法。
vue中 $parent 的含义
Sarahhoney12_的博客
07-04 1万+
$parent指向调用该组件的直接组件（父组件）实例， 通过 $parent 获取到 父组件 中的 props 、 data或者方法， 比如table-body.vue单文件组件中有一个handleMouseIn方法，而table.vue单文件组件在<template>中调用了<table-body />组件 //table-body.vue,代码借鉴iview h...
vue中$root的用法
jiangjunyuan168的博客
09-17 4060
【代码】vue中$root的用法。
Vue--$ref, $parent, $children--使用/教程/实例
IT利刃出鞘的博客
01-09 1936
说明 本文用示例介绍Vue中$ref, $parent, $children的用法。 使用场景 $refs：父组件访问子组件 如果在普通的DOM元素上使用，引用指向的是DOM元素； 如果用在子组件上，引用的是组件实例 $parent：子组件访问父组件 $children：父组件访问子组件
【大前端】说说vue的$root,$parent,$refs和$children
GengMS的博客
01-27 1534
说说vue的$root,$parent,$refs和$children 文章目录说说vue的\$root,\$parent,\$refs和\$children$root$parent$refs$children $root 访问根元素。 语法： this.$root.属性名。 在普通html工程内的用法看官网即可。 如果在vue-cli工程内使用$root: 有人可能认为根元素是App.vue。但是其实是main.js中new Vue这个实例，在new Vue这个实例中定义data即可 $root可以将根组
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值