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 计算两个整数的百分比值
Dec 26 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
浅析php header 跳转
2013/06/17 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP实现简单登录界面
2019/10/23 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python 经典数字滤波实例
2019/12/16 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
美国Max仓库:Max Warehouse
2020/05/31 全球购物
革命英雄事迹演讲稿
2014/09/13 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2014年小学工作总结
2014/11/26 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
七一表彰大会简报
2015/07/20 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang