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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
js简易版购物车功能
Jun 17 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
js实现星星海特效的示例
Sep 28 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
计数器详细设计
2006/10/09 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php查看网页源代码的方法
2015/03/13 PHP
PHP加密技术的简单实现
2016/09/04 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP分享图片的生成方法
2018/04/25 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
详解python里的命名规范
2018/07/16 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
Django URL参数Template反向解析
2020/11/24 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
房产协议书范本
2014/10/18 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫