vue中$parent $children $refs $root之间的关系

最新推荐文章于 2024-05-30 11:21:03 发布
最新推荐文章于 2024-05-30 11:21:03 发布
阅读量434 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5a48c3adf265da43062b1c8c
版权

vue提供的这几种方法可以随便调用父子组件跟组件data里的值还有method中的方法

$parent是子组件调用父组件的方法，返回的是一个对象，因为只会有一个父组件

写法：this.$parent.getParent()

$children是父组件调用子组件的方法，返回的是一个数组，因为至少有一个子组件

$refs是父组件调用某一个子组件的方法，返回的是一个对象，因为是指定的某一个

写法:this.$refs.child.getChild()

$root是子组件调用根组件的方法，返回的是一个对象，因为只有一个根组件

写法:this.$root.getRoot()


转载于:https://juejin.im/post/5a48c3adf265da43062b1c8c

weixin_34381687
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实例详解vue中的$root和$parent
10-17
主要介绍了vue中的$root和$parent ，本文通过文字实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue组件 $children,$refs，$parent的使用详解
08-29
本篇文章主要介绍了vue组件 $children,$refs，$parent的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【Vue】何为 $parent ？它的使用场景是什么？
Milk~每天分享一点点，技术进步一点点
10-26 6585
何为 $parent ？ $ 是什么？ 首先 一般默认的来说，我们带 $ 符号的我们基本默认是 vue 实例对象身上的也就是 vue 中的 this，我们可以 console 一下 this $parent 简介 官方介绍： $parent：当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己 $parent 既 可 以 接 受 父 组 件 数 据 ， 又 可 以 修 改 父 组 件 数 据， 是 双 向 的 $parent 可以调用父组件的方法 使用场景 子组件发生某个事
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的$parent属性
热门推荐
qq_41629522的博客
07-01 1万+
1.首先 一般默认的来说，我们带 $ 符号的我们基本默认是vue实例对象身上的也就是 vue中的 this，我们可以console一下this， 这上面有很多的属性，我们比较常用的 有$refs , $attrs, tips: 我们绑定的时候应该是单数形式比如： $ref 获取时候应该是复数形式。 2. $refs 让我们可以在父组件中进行操作子组件的数据以及方法。 $parents 让我们可以在子组件中对父组件的data和方法操作。 ...
vue中$root的用法
jiangjunyuan168的博客
09-17 3552
【代码】vue中$root的用法。
vue父子组件传值之$parent、$children、$refs
djh052900的博客
01-20 4491
vue父子组件传值之$parent、$children、$refs
vue2开发中实例事件总结($on,$once,$off,$emit,$root,$refs,$parent 的使用)
知其白，守其黑；和其光，同其尘。
01-01 1774
1.实例事件就是在构造器外部调用构造器内部的数据。 2.使用场景:比如构造器已经有一个加的方法,现在还要做一个减的方法,而我又不想动构造器里面的信息,那就可以使用实例事件了. 操作如下: 与on对应的还有一个on对应的还有一个on对应的还有一个once,上述代码只改一个单词$once app.$once('reduce',function(){ console.log("减...
Vue中$root的使用方法
大剑师兰特的GIS世界
02-20 1641
在 Vue 中，`$root`是一个属性，用于访问根组件实例。它的作用是连接所有其他的 Vue 实例组件，并向子组件提供全局配置和实例方法。根实例是 Vue 的上下文环境，包含了整个 Vue 应用的数据和方法。使用$root属性，可以方便地访问根实例的方法、数据和生命周期钩子函数。
vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件
大前端
08-16 7245
vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件
Vue中$refs的用法详解
08-27
主要介绍了Vue中$refs的用法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue父子组件间引用之$parent、$children
10-15
主要介绍了vue父子组件间引用之$parent、$children的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用
喜欢分享,善于记录工作中遇到的问题,和自己的思考
05-13 4125
vue组件之间的通信 1.this.$refs 是一个对象，持有已注册过的所有子组件。 ref为子组件指定一个名称，通过this.$refs.ref指定的子组件名称 即可获得对该子组件的操作 （包括data中定义的数据和methods中定义的方法） 2.this.$parent 可以直接操作当前组件的父组件 3.this.$root 可以直接操作当前组件的所有祖先组件的根组件 4.this.$children 是一个数组，可以操作当前组件的所有子组件 例子 this.$refs使用 父组件
vue父子组件间传值(props)
weixin_30415801的博客
05-17 234
先定义一个子组件，在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { ...
vue组件间通信方法集
老古懂的博客
05-09 1554
整理vue中8种常规的通信方案 1、通过 props 传递 2、通过 $emit 触发自定义事件 3、使用 ref 4、EventBus 5、$parent 或$root 6、attrs 与 listeners 7、Provide 与 Inject 8、Vuex 1、通过 props 传递 /*适用场景：父组件传递数据给子组件 子组件设置props属性，定义接收父组件传递过来的参数 父组件在使用子组件标签中通过字面量来传递值*/ //子组件 props:{ // 字符串形式 name
Vue-Cli组件传值—root、children、parent
AWDSDF的博客
09-04 216
Vue-Cli组件传值—root、children、parent
vue中的 $children 和 $parent
weixin_30888027的博客
08-12 961
$children 指代的是子组件，返回的是一个组件集合 用法： this.$children 如果你能清楚的知道子组件的顺序，你也可以使用下标来操作； var inputDom = this.$children[0].$el.querySelectorAll(".el-input__inner")[0]; $parent指代的是父组件 ，返回的是一个组件集合 用法...
vue $root(访问根组件) $parent(访问父组件) $refs/$children(访问子组件)
weixin_42448623的博客
11-11 1815
$root 访问根组件 <div id="temp"> <my-con></my-con> </div> Vue.component('my-son',{ template:'<div>根组件：{{this.$root.msg}}</div>' }) new Vue({ el:"#temp", data:{...
【redis】Spring之RedisTemplate配置与使用
最新发布
05-30 338
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
vue3中.$parent.$parent.$parent.$refs
09-01
在Vue 3中，通过使用`$parent`来访问父组件并获取它的属性和方法。`$parent`用于直接访问父组件的实例。而`$refs`是一个特殊的属性，它可以访问和操作子组件的实例。在引用中的代码示例中，`$refs`被用来访问名为"detailForm"的子组件实例，即`this.$refs["detailForm"]`。所以，`$parent.$parent.$parent.$refs`可以用来访问父组件的父组件（祖父组件）中的`$refs`。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue组件 $children,$refs，$parent的使用详解](https://download.csdn.net/download/weixin_38669091/12775877)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *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.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值