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 相关文章推荐
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php文档更新介绍
2011/07/22 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python解析xml文件操作实例
2014/10/05 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
flask-restful使用总结
2018/12/04 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python新手学习标准库模块命名
2020/05/29 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
面向对象设计的原则是什么
2013/02/13 面试题
会计岗位职责范本
2014/03/07 职场文书
党建工作经验交流材料
2014/05/25 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
初二物理教学反思
2016/02/19 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js
Django rest framework如何自定义用户表
2021/06/09 Python