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

最新推荐文章于 2023-01-20 19:37:12 发布
最新推荐文章于 2023-01-20 19:37:12 发布
阅读量204 收藏
点赞数
文章标签： vue.js 前端 javascript vue
原文链接：https://www.jianshu.com/p/8840c089d60a
版权
  • this.$refs
    是一个对象，持有已注册过的所有子组件。
    ref为子组件指定一个名称，通过this.$refs.ref指定的子组件名称 即可获得对该子组件的操作（包括data中定义的数据和methods中定义的方法）
  • this.$parent
    可以直接操作当前组件的父组件
  • this.$root
    可以直接操作当前组件的所有祖先组件的根组件
  • this.$children
    是一个数组，可以操作当前组件的所有子组件
秃叽叽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
this.$children、this.$refs、this.$parent、this.$root
weixin_43939111的博客
04-28 5779
一、当需要拿到所有子组件的时候才会通过this.$children，返回的是一个存放所有子组件的数组，一般很少用，除非你的组件顺序变化不大且能清楚记住子组件的位置 this.$children[3].username //获取第四个子组件的data里的username数据 二、this.$ refs，给组件绑定ref属性，相当于html获取dom元素，this.$ refs返回的是一个对象 this.$refs.titleCpn.aaa //获取titleCpn组件中的aaa数据 ...
jquery中的$(this).children和find的区别
千里之行，始于足下！
06-17 7140
children是获取下一层的子元素 find是无论this下面有多少层都可以直接获取
vue父子组件传值之$parent、$children、$refs
djh052900的博客
01-20 4634
vue父子组件传值之$parent、$children、$refs
vue 里 this.$parent 作用
突维
05-15 4849
this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }！
vue中 的this.$refs
不加防腐剂的博客
01-06 1705
使用 this.$refs 来获取元素和组件 通过实例的vm.refs(this.refs(this.refs(this.refs)取得通过ref注册过的组件 ref是被用来给元素或子组件注册引用信息。引用信息将注册在父组件的 $refs 对象身上。如果在普通的DOM元素身上使用，引用指向就是DOM元素；如果用在子组件身上，引用就是指向组件实例。 因为ref本身就是作为渲染结果被创建的，在初始渲染的时候不能被范文-他们还不存在! $ref也不是响应式的，因此你不应该试图它用在模板中做数据绑定。 <te
vue中 this.$set的用法详解
10-16
总结一下，`this.$set`在Vue中的作用主要有以下几点： 1. 当向响应式对象添加新属性时，确保Vue能追踪这个属性并响应视图更新。 2. 当修改数组元素时，特别是直接修改对象属性而不是替换整个对象时，保证Vue能够检测...
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
详解vue中this.$emit()的返回值是什么
10-17
总的来说，`this.$emit()`在Vue中用于触发自定义事件，它本身不返回任何有意义的值，但可以通过回调函数实现数据的传递和交互。理解这一机制对于编写高效的组件通信逻辑至关重要。在实际开发中，我们应该根据需求...
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
在Vue.js中，`this.$refs` 是一个非常重要的特性，它允许开发者访问Vue实例挂载的DOM元素或子组件实例。然而，在某些情况下，尝试通过`this.$refs`获取DOM或组件时可能会遇到错误。本文将深入探讨这个问题及其解决...
解决vue.js this.$router.push无效的问题
10-18
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue组件通信的 $children 、$refs、$parent、provide/inject的使用
鸭绒的博客
08-04 1153
文章目录1. 前言2. 父组件访问子组件2.1 $children2.2 $refs2.3 两者的使用区分3. 子组件访问父组件 1. 前言 我来给你们添蜜啦 之前我们介绍了父传子使用props属性，子传父使用$emit发射自定义函数实现父子组件通信。那么我们有什么方法可以直接在父组件操作子组件的数据或函数、子组件操作父组件的数据或函数吗？下面就通过 $children 、$refs、$parent实现。 有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。 父组件访问
vue $refs的基本用法
weixin_34404393的博客
05-26 958
<div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", methods:{ ...
访问元素和组件：$root 访问根实例、$parent 父组件、ref 子组件
weixin_41796631的博客
10-28 4238
这里介绍的方法可以访问（获取、修改）到根实例、父组件、子组件里面的数据。因为使用这些方法，可能造成难以排查到数据在哪里修改，所以慎用这些方法。 1. 访问根实例: $root 这里创建一个根实例  new Vue({ el:"#app", data: { foo: 1 }, computed: { bar: function () { /* ... */...
（转）AS3中的stage,this,root的区别
weixin_33675507的博客
05-14 128
要了解这个问题就要先对flash中的显示对象结构有一个大概的了解：   第一级：舞台；   第二级：当前SWF；   第三级：各种容器及可视对象（如：文本框，位图……）；   以此类推…………   stage：   其中舞台（Stage）是最根本的容器，包含当前SWF的所有显示对象，每个flash程序只能有一个舞台容器。   所有显示对象的stage属性指向舞台。  ...
Knockout学习笔记之二（$root，$parent及$data的区别）
weixin_30514745的博客
10-20 178
以下是我从Google上找到的一个例子，非常生动形象，我修改了部分代码，具体内容如下： 对于$root 与$parent的区别： $rootrefers to the view model applied to the DOM withko.applyBindings; 译：$root 是指ViewModel所应用于ko.applyBindings时所使用的DOM...
vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
热门推荐
鸭绒的博客
09-19 4万+
使用props进行父子组件通信时产生错误：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “currentIndex” 产生错误的原因：在子组件中，你试图修改父组.
Vue介绍$parent()方法和$refs()方法
weixin_43966487的博客
01-24 1万+
Vue介绍parent()方法和parent()方法和parent()方法和refs(）方法 首先介绍这个两个方法的用处：parent()方法是在子组件中可以直接访问该组件的父实例或组件；而refs（）方式可以用来访问子组件的中的数据。 贴出代码 3.分析方法:（1）在41-51行代码中使用了parent()方法，首先不难看出this.parent()方法，首先不难看出this.paren...
vue2.0中this.$parent和this.$refs的使用
Liingot的博客
03-09 2万+
Hello，大家周末早上好最近有段时间没有及时更新博客抱歉了各位，今天给大家分享的这个是在我个人最近的项目中所学到的东西今天拿出来给大家分享一下。 大家先回顾一下vue2.0中子父之间互相传值的方式是什么样子的 子向父传值：this.$emit(“name”,“值”); 父接收：@name:name （自定义方法接收）； 父向子传值：:name=‘222’ 子接收：props:[‘name’...
VUE中 ref $refs 使用详解，扩展到$parent 、$children 的使用
zhouzuoluo的博客
07-18 1万+
$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息，引用信息将会注册在父组件的$refs对象上，在js中使用$refs来指向DOM元素或组件实例；   应用一：在DOM元素上使用$refs可以迅速进行dom定位，类似于$("selectId")，如下 ​ &lt;template&gt; &lt;div class="parent"&gt; &lt;...
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....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值