Vue-Cli组件传值—root、children、parent

最新推荐文章于 2022-09-08 20:56:27 发布
最新推荐文章于 2022-09-08 20:56:27 发布
阅读量226 收藏 1
点赞数
分类专栏： vue 组件通信 javascript 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AWDSDF/article/details/126686409
版权
vue 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
javascript
8 篇文章 0 订阅
订阅专栏
组件通信
3 篇文章 0 订阅
订阅专栏
本文详细介绍了Vue-Cli中组件间的通信方式，包括如何使用$root来获取根组件实例，利用$children访问子组件实例，以及通过$parent来获取父组件实例。这些方法在父子组件交互中起到关键作用，帮助开发者更好地理解和掌握Vue的组件通信机制。
摘要由CSDN通过智能技术生成

Vue-Cli组件传值—root、children、parent

1.$root

this.$root()		//获取当前实例的根节点全部实例	父子组件都可用

2.$children

this.$children()	//获取当前组件的所有子组件实例	针对父组件

3.$parent

this.$parent()		//获取当前组件的父组件实例		针对子组件
大厂乱杀程序猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【大前端】说说vue的$root,$parent,$refs和$children
GengMS的博客
01-27 1255
说说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可以将根组
细聊组件通信（$children、$refs、$parent、$root）
weixin_61285710的博客
01-14 430
父组件访问子组件：使用$children或$refs 子组件访问父组件：使用$parent 子组件访问根组件：$root
vue中this.$parent、this.$root、this.$children、this.$ref的区别和作用
喜欢分享,善于记录工作中遇到的问题,和自己的思考
05-13 4249
vue组件之间的通信 1.this.$refs 是一个对象，持有已注册过的所有子组件。 ref为子组件指定一个名称，通过this.$refs.ref指定的子组件名称 即可获得对该子组件的操作 （包括data中定义的数据和methods中定义的方法） 2.this.$parent 可以直接操作当前组件的父组件 3.this.$root 可以直接操作当前组件的所有祖先组件的根组件 4.this.$children 是一个数组，可以操作当前组件的所有子组件 例子 this.$refs使用 父组件
this.$children、this.$refs、this.$parent、this.$root
weixin_43939111的博客
04-28 5843
一、当需要拿到所有子组件的时候才会通过this.$children，返回的是一个存放所有子组件的数组，一般很少用，除非你的组件顺序变化不大且能清楚记住子组件的位置 this.$children[3].username //获取第四个子组件的data里的username数据 二、this.$ refs，给组件绑定ref属性，相当于html获取dom元素，this.$ refs返回的是一个对象 this.$refs.titleCpn.aaa //获取titleCpn组件中的aaa数据 ...
Vue父子组件传值之——访问根组件$root、$parent、$children和$refs
weixin_30613433的博客
03-21 1178
Vue组件传值除了prop和$emit，我们还可以直接获取组件对象： 根组件： $root // 单一对象 表示当前组件树的根 Vue 实例，即new Vue({...根组件内容})。如果当前实例没有父实例，此实例将会是其自己。Vue子组件可以通过$root属性访问父组件实例的属性和方法 父组件：$parent // 单一对象 $parent表示父组件的实例，该属性只读 子组件：$c...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
vue-cli-plugin-multiple-page 一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请...
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果...
详解vue-router和vue-cli以及组件之间的传值
12-10
一、安装vue-cli脚手架工具 cnpm install vue-cli -g 二、 创建项目 vue init webpack-simple vue_webpack 使用的是webpack-simple模板，项目名为vue_webpack , webpack-simple和webpack模板区别就是少了代码检查...
Vue组件间传值详解
月光晒了很凉快的博客
09-08 1297
（注意这里是自定义的属性名称，而不是父组件数据源中的数据名称）示例：
vue组件之间传值的几种方式
小菜鸟的博客
11-11 1万+
vue组件传值 父子组件之间传值。几种常见方式 第一种方式（父传子） 父组件 <m-child v-bind:msg="'from parent msg'"></m-child>//在父组件上面绑定一个msg 注意：数据绑定的时候记得加 ： 如果后面的数据是字符串则不用加 双引号 如果实在要加 ： 的时候写法 :msg="‘i am item’" ,因为 ：msg 默认把后面的识别变量，所以后面记得在字符串里面单引号，直接msg默认是字符串，后面不用加 子组件（mCh
Vue组件间的通讯方式
qq_40063198的博客
06-27 1000
Vue组件间的通讯方式
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
Vue—组件实例之$root、$parent、$children
雷雨天的雷胖子
08-31 4946
一、概述 获取Vue的根组件实例。
vue - $root,$parent,$children,$ref的用法
Candy_mi的博客
07-12 1072
$root，$parent都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过$parent访问得到的是它最近一级的父组件，通过root访问得到的是根组件。 $parent $parent在子组件中调用父组件的方法跟data里设置的数据 父组件 data() { return { parent: 1, }; }, meth...
vue-$root $parent $children
weixin_46759666的博客
07-28 354
一个vue中可能包含了多个vue组件，组件可以相互关联，相互包含，$root: 组件的根， parent：父组件，parent ：父组件，parent：父组件，children：子组件。组件之间的数据和方法可通过这些对象来调用。子组件有数组，可通过 this.$children[0]的方式来判断第几个组件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t
访问元素和组件：$root 访问根实例、$parent 父组件、ref 子组件
weixin_41796631的博客
10-28 4252
这里介绍的方法可以访问（获取、修改）到根实例、父组件、子组件里面的数据。因为使用这些方法，可能造成难以排查到数据在哪里修改，所以慎用这些方法。 1. 访问根实例: $root 这里创建一个根实例  new Vue({ el:"#app", data: { foo: 1 }, computed: { bar: function () { /* ... */...
vue中$parent $children $refs $root之间的关系
weixin_34381687的博客
01-02 440
vue提供的这几种方法可以随便调用父子组件跟组件data里的值还有method中的方法$parent是子组件调用父组件的方法，返回的是一个对象，因为只会有一个父组件写法：this.$parent.getParent()$children是父组件调用子组件的方法，返回的是一个数组，因为至少有一个子组件$refs是父组件调用某一个子组件的方法，返回的是一个对象，因为是指定的某一个写法:this.$re...
serve vue-cli-service serve build vue-cli-service build lint vue-cli-service lint
最新发布
09-08
具体来说，vue-cli-service serve用于在开发环境下运行项目，vue-cli-service build用于打包项目，vue-cli-service lint用于检查项目代码风格。这些命令是在项目的package.json文件中定义的脚本。例如，可以通过运行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值