父访问子  (需要掌握)

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. eclipse中配置Webdriver

    安装JDK,配置好Java环境 下载Eclipse,并完成安装 下载Webdriver的JAR文件(访问Selenium官网,下载Java版的zip文件,并且解压到本地磁盘,解压后文件夹内容如下图:) ...

  2. ctfshow web2 web3

    ctfshow web2 1.手动注入题.先用万能密码admin' or 1=1%23,有回显 2.union select注入,2处有回显 3.依次查找数据库.表.字段 得到flag ctfshow ...

  3. BUU XSS COURSE 1 & [CISCN2019 华东北赛区]Web2

    BUU XSS COURSE 1 & [CISCN2019 华东北赛区]Web2 XSS的题目没怎么做过,比赛基本上也没有(=_=),总结下今天做的两题 都是看赵总视频现学现做的,这里附上学习 ...

  4. 从SQL Server数据库导出SQL语句

    不同于直接 备份/恢复 或者 导入/导出 数据库操作. 新版本SQL Server客户端中还可以生成相对应的SQL语句. 非常方便与查看和与其他人共享. 连接上数据库后, 右击数据库, 选择 Gene ...

  5. springMvc 启动过程

    转载自https://www.jianshu.com/p/dc64d02e49ac 这里给出一个简洁的文字描述版SpringMVC启动过程: tomcat web容器启动时会去读取web.xml这样的 ...

  6. C++11多线程之future(一)

    // ConsoleApplication5.cpp : 定义控制台应用程序的入口点. #include "stdafx.h" #include<random> #in ...

  7. gorm中的更新

    保存所有字段 Save 会保存所有的字段,即使字段是零值. db.First(&user, 5)user.Name = sql.NullString{"王八", true} ...

  8. HTML(前端web)

    目录 一:HTML前端 1.什么是前端? 2.什么是后端? 3.什么是HTML? 4.HTML不是什么? 5.前端的学习流程 6.BS架构 7.搭建服务器 简易(浏览器访问) 8.浏览器访问报错原因 ...

  9. python引用列表--10

    #!/usr/bin/python #coding=utf-8 #好好学习,天天向上 python=["a","b","c","d ...

  10. 字节跳动Web Infra发起 Modern.js 开源项目,打造现代 Web 工程体系

    10 月 27 日举办的稀土开发者大会上,字节跳动 Web Infra 正式发起 Modern.js 开源项目,希望推动现代 Web 开发范式的普及,发展完整的现代 Web 工程体系,突破应用开发效率 ...