父访问子　　（需要掌握）

this.$children 和 this.$refs

this.$children 返回的是一个数组，包含父组件的所有子组件　　this,$refs 返回的是一个对象，默认为空，返回父组件中所有标签带有ref属性的子组件

this.$children 是获取父组件的所有子组件，然后返回一个数组 　　（不常用）
this.$refs 则是通过给 组件标签上 加上一个 ref属性，然后在父组件中调用 this.$refs时才会返回 一个对象　　（常用，用的非常多 基本都是用这个）
例如　　子组件标签 <cpn ref="mm"></cpn> 　　通过this.$refs 他就会返回一个对象 {mm:Vuecomponent} 而mm就作为一个key，我们通过this.$refs.mm 就能拿到这个组件，之后就可以拿到具体的值了

子访问父   （不常用）

this.parent 访问父组件 　　this.root 访问根组件 　　（都用得少）

vue的父与子组件的访问的更多相关文章

  1. Vue.js父与子组件之间传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  2. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

  3. vue 父向子组件传递数据，子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  4. 深度剖析Vue中父给子、子给父、兄弟之间传值！

    本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...

  5. vue 项目， 通知子组件更新，父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）

    vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...

  6. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

  7. Vue（13）子组件与父组件超详细解析

    父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.具 ...

  8. vue 中 echart 在子组件中只显示一次的问题

    问题描述 一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是 ...

  9. 总结vue中父向子，子向父以及兄弟之间通信的几种方式

    子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值 App.vue代码 <template> <div id="app"&g ...

随机推荐

  1. 函数实现将 DataFrame 数据直接划分为测试集训练集

     虽然 Scikit-Learn 有可以划分数据集的函数 train_test_split ,但在有些特殊情况我们只希望它将 DataFrame 数据直接划分为 train, test 而不是像 tr ...

  2. 不会一致性hash算法，劝你简历别写搞过负载均衡

    大家好,我是小富~ 个人公众号:程序员内点事,欢迎学习交流 这两天看到技术群里,有小伙伴在讨论一致性hash算法的问题,正愁没啥写的题目就来了,那就简单介绍下它的原理.下边我们以分布式缓存中经典场景举 ...

  3. 【Java】包装类

    文章目录 包装类 什么是包装类 基本数据类型-->包装类 包装类-->基本数据类型 自动装箱与自动拆箱 基本数据类型.包装类与String的转换 基础数据类型.包装类-->Strin ...

  4. 单篇长文TestNG从入门到精通

    简介 TestNG是Test Next Generation的缩写,它的灵感来自于JUnit和NUnit,在它们基础上增加了很多很牛的功能,比如说: 注解. 多线程,比如所有方法都在各自线程中,一个测 ...

  5. RHCSA 第三天

    1.将echo "This is my first time to use pipe"内容输出到屏幕上,且保存到pipe_data.txt中 2. 重定向: a.新建一个文件red ...

  6. 【刷题-PAT】A1112 Stucked Keyboard （20 分）

    1112 Stucked Keyboard (20 分) On a broken keyboard, some of the keys are always stucked. So when you ...

  7. WebGPU图形编程（4）：构建一个彩色的正方形<学习引自徐博士教程>

    本节我们来复原一个彩色的正方形,前提告知,本节的shaders和main的代码从结构上有调整,我会更加详细的描述每行的代码意思: 源代码下载地址:https://github.com/jack1232 ...

  8. 常见Web服务器

    常见Web服务器

  9. 理解cpu load

    三种命令 1. w 2. uptime 3. top CPU负载和CPU利用率的区别 1)CPU利用率:显示的是程序在运行期间实时占用的CPU百分比 2)CPU负载:显示的是一段时间内正在使用和等待使 ...

  10. 查看Linux系统信息

    1.查看内核 [root@localhost etc]# uname -aLinux localhost.localdomain 3.10.0-514.el7.x86_64 #1 SMP Tue No ...