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 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python的re模块正则表达式操作
2016/05/25 Python
Python pymongo模块用法示例
2018/03/31 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python通过zabbix api获取主机
2018/09/17 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
大学生志愿者感言
2014/01/15 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
护理见习报告范文
2014/11/03 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers