vue组件 $children,$refs,$parent的使用详解


Posted in Javascript onJuly 31, 2017

本文介绍了vue组件 $children,$refs,$parent的使用,分享给大家,也自己留个笔记

如果项目很大,组件很多,怎么样才能准确的、快速的寻找到我们想要的组件了??

1)$refs

首先你的给子组件做标记。demo :<firstchild ref="one"></firstchild>

然后在父组件中,通过this.$refs.one就可以访问了这个自组件了,包括访问自组件的data里面的数据,调用它的函数

2)$children

他返回的是一个组件集合,如果你能清楚的知道子组件的顺序,你也可以使用下标来操作;

for(let i=0;i<this.$children.length;i++){
    console.log(this.$children[i].msg);输出子组件的msg数据;
 }

接下来就给一个长一点的deno

首先定义一个父组件:parentcomponent,

在父组件中我又是使用了两个自组件(假如有一百个自组件)[明确一点,组件只能有一个根节点],根节点是啥,我不知道。。。。。。

<template id="parentcomponent">
  <div >
    <p>this is a parent-component</p>
    <firstchild ref="f1"></firstchild>
    <secondchild ref="f2"></secondchild>
    <button @click='show_child_of_parents'>show child msg</button>
  </div>
</template>

 分别给出两个字组件的定义:(第2个使用的是template,第1个是script) 

<script type="text/x-template" id="childOne">
  <div>
    <p>this is first child</p>
   
    //使用stop阻止默认事件(vue的事件处理机制)
    <button @click.stop='getParent'>get parent msg</button>
  </div>
</script>

<template id="childSec">
  <div>
    <p>this is second child</p>
  </div>
</template>

组件模板定义好了,就是用:

1)挂在元素: 

<script>
  new Vue({
    el:"#app",
    data:{},
    components:{
      "parent-component":{
        template:'#parentcomponent', 
        data(){
          return{msg:'这是父组件中的内容'}          
        },
        methods:{
          show_child_of_parents(){
            //children方式访问自组件






 for(let i=0;i<this.$children.length;i++){
                console.log(this.$children[i].msg);
            }







 //通过$ref打标记,访问子组件 
            console.log(this.$refs.f1.msg);
 






this.$refs.f1.getParent();
          },                  
        },  





   
        components:{
          'firstchild':{
            template:'#childOne',
            data(){
              return {msg:'这是第一个子组件'};
            },
            methods:{
              getParent(){
                let a=1;
                console.log(a);
                alert(this.$parent.msg);
                
              }
            },
          },
          
          'secondchild':{
            template:'#childSec',
            data(){
              return {msg:"这是第二个组件"};
            }
          }
          
        }
                
      }
    }
    
  });

</script>

 2)使用父组件了

<body>
    <p><strong>可以通过$refs访问父组件的子组件</strong></p>
    <div id="app">
      <parent-component></parent-component>
    </div>
  </body>

值得注意的是vue2,相比vue1,丢弃了一些东西。。。。、https://3water.com/article/93467.htm

总结一下:

1)组件只能一个根节点

2)可以在自组件中使用this.$parent.属性值,或者函数

3)在父组件中可以使用this.$refs.组件的标记 访问子组件,或者this.$children[i].属性,,访问子组件的

 4)你需要注意this的指向

vue组件 $children,$refs,$parent的使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 #Javascript
Kindeditor单独调用多图上传实例
Jul 31 #Javascript
老生常谈ES6中的类
Jul 31 #Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 #Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 #Javascript
深入理解Vue transition源码分析
Jul 30 #Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 #Javascript
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python中的引用知识点总结
2019/05/20 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
摄影助理岗位职责
2014/02/07 职场文书
法制报告会主持词
2014/04/02 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
青年文明号汇报材料
2014/12/23 职场文书
部队个人年终总结
2015/03/02 职场文书
农村党支部承诺书
2015/04/30 职场文书
金陵十三钗观后感
2015/06/04 职场文书
教师节随笔
2015/08/15 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
JavaScript的Set数据结构详解
2022/02/18 Javascript
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript