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 Array对象入门分析
Oct 30 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
js转义字符介绍
Nov 05 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
js上传图片预览的实现方法
May 09 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 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
如何选购合适的收音机
2021/03/01 无线电
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python 切换root 执行命令的方法
2019/01/19 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Python调用C语言程序方法解析
2020/07/07 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
2014年党支部学习材料
2014/05/19 职场文书
企业活动策划方案
2014/06/02 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
师德先进个人材料
2014/12/20 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技