如果项目很大，组件很多，怎么样才能准确的、快速的寻找到我们想要的组件了？？

1）$refs

首先你的给子组件做标记。demo ：<firstchild ref="one"></firstchild>

然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数

2）$children

他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；

1
2
3
for(let i=0;i<this.$children.length;i++){
    console.log(this.$children[i].msg);输出子组件的msg数据；
 }

接下来就给一个长一点的deno

首先定义一个父组件：parentcomponent，

在父组件中我又是使用了两个自组件（假如有一百个自组件）[明确一点，组件只能有一个根节点]，根节点是啥，我不知道。。。。。。

1
2
3
4
5
6
7
8
<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）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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）挂在元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<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)使用父组件了

1
2
3
4
5
6
<body>
  <p><strong>可以通过$refs访问父组件的子组件</strong></p>
  <div id="app">
    <parent-component></parent-component>
  </div>
</body>

值得注意的是vue2,相比vue1,丢弃了一些东西。

总结一下：

1）组件只能一个根节点

2）可以在自组件中使用this.$parent.属性值，或者函数

3）在父组件中可以使用this.$refs.组件的标记 访问子组件，或者this.$children[i].属性，，访问子组件的

4）你需要注意this的指向

vue组件 $children,$refs，$parent的使用的更多相关文章

  1. vue 组件基本使用

    组件的基本使用 注册组件 注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传入这个组件的配置.vue.component()注册的全局组件 Vue.componen ...

  2. Vue#组件

    组件: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 使用: ...

  3. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  4. 13.vue组件

    vue组件(一) 组件嵌套: 1.全局嵌套: <!doctype html> <html> <head> <meta charset="utf-8& ...

  5. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  6. 08: vue组件

    1.1 初识组件 1.什么是组件 1. Html中有组件,是一段可以被复用的结构代码 2. Css中有组件,是一段可以被复用的样式 3. Js中有组件,是一段可以被复用的功能 4. Vue中也有组件, ...

  7. Vue学习笔记之Vue组件

    0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...

  8. Javascript - Vue - 组件

    创建组件 组件是可以重复使用的html容器,可以把它注册到全局的Vue或实例的vue对象上,使它成为全局组件或vue对象的子组件,然后可以将它的html标签插入html文档中.组件的html只能有一个 ...

  9. vue组件

    分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...

  10. vue组件一

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 剑指Offer的学习笔记（C#篇）-- 旋转数组的最小数字

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...

  2. 2、kubeadm快速部署kubernetes（v1.15.0）集群190623

    一.网络规划 节点网络:192.168.100.0/24 Service网络:10.96.0.0/12 Pod网络(默认):10.244.0.0/16 二.组件分布及节点规划 master(192.1 ...

  3. Unraveling the JPEG file

    (文章还剩实践部分没写,答辩过后补上...) JPEG文件在当下数字化生活中是无处不在的,但是在熟悉的JPEG面纱背后,隐藏着一些算法,它们去除了人类眼中无法察觉到的细节.这产生了最高的视觉质量与最小 ...

  4. t.call is not a function

    js 写错了... 代码: $("form").each({$(this).submit(function(){return false;})}); 丢了一个 function() ...

  5. vs获取最新时，提示签出解决方案

    项目中的文件有被意外去掉了只读属性的. VSS中签入状态的文件在本地都有只读属性. 如果VSS中是签入状态,而对应的本机文件没有只读状态,在获取最新版本的时候,就会弹出一个对话框提示签出还是用VSS中 ...

  6. centos7虚拟机安装

    Centos7 第1章 CENTOS 7 简介 1.1 centos的演变 启动流程sysvinit 串行启动:一次一个, 一个一个启动 并行启动:全部的一起启动 init优点 运行非常良好.主要依赖 ...

  7. flush logs时做的操作

    flush logs时做的操作:  对于一般查询日志和慢日志,先关闭文件再打开  对于binlog,关闭当前的,开始用下一个新的  用错误日志文件的话,先关闭再打开flush logs可以对一般查询日 ...

  8. ip route,ip rule, iptables和docker的端口映射

    iptables 默认5个表, 不可增加其他表 raw 用于配置数据包,raw 中的数据包不会被系统跟踪. filter 是用于存放所有与防火墙相关操作的默认表. nat 用于 网络地址转换(例如:端 ...

  9. 约瑟夫问题（vector的使用)

    题目大意:有n个人围坐在圆桌周围,每个人都有一个固定的编号. 从第s(<=n)个人开始报数(按照顺时针方向,从1开始),报到m的人出列,接着再从出列着的 下一个人开始报数(依然从1开始),报到m ...

  10. redis数据类型--个人常规用法

    一.String 1.可以容纳最高512M的value. 2.经常用于通过expire来实现自动过期的一些值,直接通过setex 来. 3.通过incrby的方式,来实现value值得增长. 4.执行 ...