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

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. AddDemo教学演示

  2. php模拟post提交数据

    $data = '{ "id": "17999030", "method": "sayHello", "jso ...

  3. 关于dijkstra求最短路(模板）

    嗯....   dijkstra是求最短路的一种算法(废话,思维含量较低,   并且时间复杂度较为稳定,为O(n^2),   但是注意:!!!!         不能处理边权为负的情况(但SPFA可以 ...

  4. Java中的生产者和消费者实例（多线程 等待唤醒机制）

    1.什么是等待唤醒 我们实现的效果 创建生产者和消费者  对服装进行生产  和售卖 实现生产一个就消费一个 来观察线程的各种状态 下面是用到的方法: wait()方法:让一个线程进行等待 另外一个线程 ...

  5. PHP学习 文件操作函数的应用--简单网络留言模板

    <?php /** 网络留言板模式 主要运用到的函数有 fopen fclose flock fwrite fread explode list */ ?> <meta http-e ...

  6. Helvetic Coding Contest 2016 online mirror F1

    Description Heidi has finally found the mythical Tree of Life – a legendary combinatorial structure ...

  7. 1105 Spiral Matrix（25 分）

    This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...

  8. 04.Spring Ioc 容器 - 刷新

    基本概念 Spring Ioc 容器被创建之后,接下来就是它的初始化过程了.该过程包含了配置.刷新两个步骤 . 刷新由 Spring 容器自己实现,具体发生在 ConfigurableApplicat ...

  9. poj3233(矩阵快速幂的和)

    题目链接:http://poj.org/problem?id=3233 Matrix Power Series Time Limit: 3000MS   Memory Limit: 131072K T ...

  10. Java文件与io——RandomAccessFile

    RandomAccessFile是IO包的类,从Object直接继承而来.只可以对文件进行操作,可以对文件进行读取和写入.RandomAccessFile有强大的文件读写功能,其内部是大型byte[] ...