码迷,mamicode.com
首页 > 其他好文 > 详细

vue父组件调用子组件资源

时间:2018-02-05 12:30:39      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:data   export   class   blog   ref   资源   情况   back   pre   

通过上篇博文提到的方法我们可以触发子组件的某个事件来实现调用子组件的某些资源(例如数据和方法),但是更多的情况下我们会想不通过触发子组件的事件,而直接调用子组件的资源

这个时候我们就需要用到ref了,使用也不难

<template>
    <div>
        <myChild ref="child1"></myChild>
    </div>
</template>

<script>
export default {
    method: {
        Mymethod() {
            //在template里写了ref属性的元素或者组件,都会被vue存到$refs对象里
            this.$refs[myChild] //获取了这个组件实例myChild
            //假设myChild有data aaa=123,method bbb(){ alert(‘456‘) }
            //我们可以直接调用
            this.$refs[mychild].aaa = 666
            this.$refs[mychild].bbb()
        }
    }
}
</script>

 

vue父组件调用子组件资源

标签:data   export   class   blog   ref   资源   情况   back   pre   

原文地址:https://www.cnblogs.com/amiezhang/p/8416667.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!