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,丢弃了一些东西。。。。、http://www.jb51.net/article/93467.htm

总结一下：

1）组件只能一个根节点

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

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

4）你需要注意this的指向

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

  1. Vue实例初始化的选项配置对象详解

    Vue实例初始化的选项配置对象详解 1. Vue实例的的data对象 介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定 ...

  2. [转]Vue项目全局配置微信分享思路详解

    这篇文章给大家介绍了vue项目全局配置微信分享思路讲解,使用vue作为框架,使用vux作为ui组件库,具体内容详情大家跟随脚本之家小编一起学习吧 这个项目为移动端项目,主要用于接入公众号服务.项目采用 ...

  3. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  4. Vue项目二、vue环境搭建以及Vue-cli使用及详解

    一.Vue多页面应用的环境搭建 每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用. 环境的搭建如下,在页面中引入如下框架 <scrip ...

  5. 【vue】---- 新版脚手架搭建项目流程详解

    一.概述 本文将介绍vue项目完整的搭建流程,在使用新版本的脚手架基础上,进行了一系列的完善和配置.主要内容如下: 1.项目初始化 安装脚手架 创建项目 项目结构 2.项目搭建配置 引入第三方插件 路 ...

  6. vue技术栈进阶（02.路由详解—基础）

    路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由

  7. springboot中的parent依赖作用详解

    最近在阅读springboot+vue全栈开发实战,松哥编写的,虽然比较简单,各种技术没有深入讲解,但是还是可以看看的,特别是我这个前端菜鸟哈哈,以后可是要学习全栈的,把书中看到的不会的地方会记录下笔 ...

  8. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  9. Vue中axios的使用技巧配置项详解

    使用axios首先要下载axios模块包 npm install axios --save 其次需要在使用的文件中引入 import axios from 'axios' 一.调用axios常见两种方 ...

随机推荐

  1. C++中switch 语句中的变量声明和

    switch 内部的变量定义: ; switch(i) { : string str; //error ; //error int val2; //right ; //right : val2 = ; ...

  2. [1525] Cow Xor

    问题描述 农民约翰在喂奶牛的时候被另一个问题卡住了.他的所有N(1 <= N <= 100,000)个奶牛在他面前排成一行(按序号1..N的顺序),按照它们的社会等级排序.奶牛#1有最高的 ...

  3. 在IIS上搭建WebSocket服务器（三）

    编写客户端代码 1.新建一个*.html文件. ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $(" ...

  4. 【POJ 2559】 Largest Rectangle in a Histogram

    [题目链接] http://poj.org/problem?id=2559 [算法] 单调栈 [代码] #include <algorithm> #include <bitset&g ...

  5. MSP430 G2553 Timer 中断总结

    目前总共用到了四个中断向量,我觉得已经把G2553的所有定时器中断都用到了. 定时器有两个,TA0与TA1,每个定时器又有两个中断向量 1,CCR0到达时的中断,在计数模式时候很有用,平时定时器的基本 ...

  6. C. Unusual Product(cf)

    http://codeforces.com/problemset/problem/405/C 题意: 给出一个n*n的矩阵,有q个操作,输入3时,输出A ,A等于第i行乘以第i列的对应元素的和(mod ...

  7. Road Construction(无向图的双连通分量)

    http://poj.org/problem?id=3352 题意:给出一个有n个顶点m条边的无向连通图,问至少添加几条边,使删除任意一条边原图仍连通. 思路:一个边双连通图删除任意一条边仍为连通图. ...

  8. 多物体运动框架案例一：多个Div的宽度运动变化

    多物体运动框架,鼠标移入Div,此Div逐渐变宽,鼠标移出后,此Div逐渐缩短恢复原长度. <!doctype html> <html> <head> <ti ...

  9. Python/Django 下载Excel2003

    一.安装 目前支持Excel2003的第三方库多少还有几个,本文使用的是xlwt,安装方式命令行:pip install xlwt 二.使用 首先.引入该库,例如:from xlwt import * ...

  10. 3最短路的几种解法 ------例题< 最短路 >

    点击进入例题   最短路 我知道的有三种方法 1 : 深搜 每次  每次有更小的路径时  就更新   ,   2 :   Dijkstra    3 : floyd 前两种   是  单源 最短路径 ...