vue组件 $children,$refs,$parent的使用详解

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的指向

原文地址:https://www.cnblogs.com/zhoubingyan/p/8413823.html

时间: 2024-10-02 10:49:37

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

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

第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea

vue技术栈进阶(02.路由详解—基础)

路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由 原文地址:https://www.cnblogs.com/jackson1/p/12698712.html

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

第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if. 2.内部指令 (1)控制元素的显示与否:v-if,v-show.v-else v-if是真实的条件渲染,根据表达式的true/false在DOM中生成或移除一个元素. 第一,这个指令是惰性

Vue中ESlint配置文件eslintrc.js文件详解

最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓狂,现在总结一下这些命令的解释,方便以后查阅. 默认eslint规则: 代码末尾不能加分号 ;(强迫症的我受不了)代码中不能存在多行空行:(这个我更也忍不了)tab键不能使用,必须换成两个空格:(超级不习惯)代码中不能存在声明了但未使用的变量:(这个我觉得可以有) 最简单的方法,关闭eslint检测,其实很简单,把 build/webpack.bas

vue中$refs的用法及作用详解

一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在JavaScript里面通过this.$refs.input1去调用就行了. 这样可以有效减少获取dom节点的性能消耗. HTML <div id="app"> <input ty

vue中 localStorage的使用方法(详解)

vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. (1).储存数据 localStorage.setItem('accessToken', 'Bearer ' + response.data.res

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

使用axios首先要下载axios模块包 npm install axios --save 其次需要在使用的文件中引入 import axios from 'axios' 一.调用axios常见两种方法(此处使用easy-mock模拟数据接口): //方法1 axios({ method: 'post', url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios' }) .then((respons

【05】Vue 之 实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作用,我们就详细讲解一下他们的使用情况.更

Vue入门系列(五)Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp