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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
Vue实现点击后文字变色切换方法
Feb 11 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
npm qs模块使用详解
Feb 07 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 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
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript document.images实例
2008/05/27 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
AngularJS日程表案例详解
2017/08/15 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python re的findall和finditer的区别详解
2020/11/15 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
请解释在new与override的区别
2012/10/29 面试题
国庆节文艺活动方案
2014/02/03 职场文书
购房意向书
2014/08/30 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014年工程部工作总结
2014/11/25 职场文书
环保建议书作文500字
2015/09/14 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL