文档章节

Vue父子组件传值之——访问根组件$root、$parent、$children和$refs

o
 osc_fmg49rzg
发布于 2019/03/21 17:52
字数 824
阅读 48
收藏 0

 Vue组件传值除了prop和$emit,我们还可以直接获取组件对象:

根组件: $root // 单一对象

表示当前组件树的根 Vue 实例,即new Vue({...根组件内容})。
如果当前实例没有父实例,此实例将会是其自己。
Vue子组件可以通过$root属性访问父组件实例的属性和方法

父组件:$parent // 单一对象

 $parent表示父组件的实例,该属性只读

子组件:$children // 数组

$children表示当前实例的直接子组件。需要注意$children并不保证顺序,也不是响应式的。如果正在尝试使用$children来进行数据绑定,考虑使用一个数组配合v-for来生成子组件,并且使用Array作为真正的来源

其他获取组件方法: $refs

$refs

 

栗子:

组件顺序:new Vue > app.vue > getComponentsVal.vue > (child-one.vue + child-tow.vue + <h2>three</h2>)

1分析配图:

 

 

2代码实现:

首先我们列出根组件和父组件:

根组件:(可以看到,这里引入了组件App)

new Vue({
  components: { App },
  template: '<App/>',
  data: {msg: '#app'} // #app
}).$mount('#app20190124')

父组件:(这里只列出了msg内容,它就是上图中的App.vue组件块;并且引入了getComponentsVal.vue组件)

data () {
    return {
      msg: 'App' // App
    }
}

然后我们着重分析当前测试本身和它的子组件: 

当前测试的组件——template:当前组件”getComponentsVal.vue”包含了两个子组件和一个h2标签

<template>
    <div>
        <h2>我是"App"的子组件,我的根组件Vue#app20190124</h2>
        <child-one ref="one"/>
        <child-two ref="two"/>
        <h2 ref="three">three</h2>
    </div>
</template>

 当前测试的组件——的两个子组件(这里没有import,而是直接写在components里):

  components: {
    childOne: {
      name: 'child-one',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-one'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    },
    childTwo: {
      name: 'child-two',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-two'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    }
  },

 当前测试的组件——的测试结果:

  mounted () {
    console.group('根组件、父组件-------------')
    console.log(this.$root) // 根实例对象: {Vue#app}
    console.log(this.$root.msg) // #app
    console.log(this.$parent) // 父组件实例对象: {Vue父}
    console.log(this.$parent.msg) // App
    console.groupEnd()
    console.group('子组件--------------------')
    console.log(this.$children) // 所有子级数组: [VueComponent, VueComponent]
    console.log(this.$children[0].msg) // 获取第一个子级msg: child-one
    console.log(this.$children[1].msg) // 获取第二个子级msg: child-two
    console.groupEnd()
    console.group('$refs--------------------')
    console.log(this.$refs) // 包含所有refs的对象:{one: VueComponent, two: VueComponent, three: h2}
    console.log(this.$refs.one) // 子级组件: child-one
    console.log(this.$refs.two) // 子级组件: child-two
    console.log(this.$refs.three) // dom元素: <h2>three</h2>
    console.groupEnd()
  }

3执行结果图:

  4当前测试的组件——的全部代码:

<template>
    <div>
        <h2>我是"App"的子组件,我的根组件Vue#app20190124</h2>
        <child-one ref="one"/>
        <child-two ref="two"/>
        <h2 ref="three">three</h2>
    </div>
</template>

<script>
export default {
  name: 'getComponentsVal',
  data () {
    return {
      msg: 'getComponentsVal'
    }
  },
  components: {
    childOne: {
      name: 'child-one',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-one'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    },
    childTwo: {
      name: 'child-two',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-two'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    }
  },
  mounted () {
    console.group('根组件、父组件-------------')
    console.log(this.$root) // 根实例对象: {Vue#app}
    console.log(this.$root.msg) // #app
    console.log(this.$parent) // 父组件实例对象: {Vue父}
    console.log(this.$parent.msg) // App
    console.groupEnd()
    console.group('子组件--------------------')
    console.log(this.$children) // 所有子级数组: [VueComponent, VueComponent]
    console.log(this.$children[0].msg) // 获取第一个子级msg: child-one
    console.log(this.$children[1].msg) // 获取第二个子级msg: child-two
    console.groupEnd()
    console.group('$refs--------------------')
    console.log(this.$refs) // 包含所有refs的对象:{one: VueComponent, two: VueComponent, three: h2}
    console.log(this.$refs.one) // 子级组件: child-one
    console.log(this.$refs.two) // 子级组件: child-two
    console.log(this.$refs.three) // dom元素: <h2>three</h2>
    console.groupEnd()
  }
}
</script>
View Code

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

如何在Ruby中生成随机字符串 - How to generate a random string in Ruby

问题: I'm currently generating an 8-character pseudo-random uppercase string for "A" .. "Z": 我目前正在为“ A” ..“ Z”生成一个8个字符的伪随机大写字符串: value = ""; 8.times{......

法国红酒甜
今天
20
0
Python中的mkdir -p功能[重复] - mkdir -p functionality in Python [duplicate]

问题: This question already has an answer here: 这个问题在这里已有答案: How can I safely create a nested directory? 如何安全地创建嵌套目录? 25 answers 25个答案 Is there a way...

技术盛宴
今天
15
0
原价500元的认证证书,限时免费考取!

本文作者:y****n 百度云智学院致力于为百度ABC战略(人工智能、大数据、云计算)提供人才生态体系建设,包括基于百度ABC、IoT的课程体系,整合百度优势技术能力的深度学习技术、Apollo无人车...

百度开发者中心
昨天
17
0
在virtualenv中使用Python 3 - Using Python 3 in virtualenv

问题: Using virtualenv , I run my projects with the default version of Python (2.7). 使用virtualenv ,我使用默认版本的Python(2.7)运行项目。 On one project, I need to use Pyth......

富含淀粉
今天
16
0
Python的__init__和self是做什么的? - What __init__ and self do on Python?

问题: I'm learning the Python programming language and I've came across something I don't fully understand. 我正在学习Python编程语言,遇到了一些我不太了解的东西。 In a method ......

javail
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部