vue父组件调用子组件方法

海阔天空BM

于 2019-12-13 16:23:37 发布

阅读量608

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue vue父组件调用子组件方法

本文链接：https://blog.csdn.net/zsm4623/article/details/103529128

Vue 专栏收录该内容

46 篇文章

订阅专栏

本文介绍在Vue中如何通过两种方法实现父组件调用子组件的方法，包括使用ref直接调用和另一种未详细说明的方法，为Vue开发者提供实用的组件间通信技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法：
通过vue中的ref直接调用子组件中的方法。(ref可以获取DOM元素，同时也能获取方法)

父组件

<template>
    <div>
        <Child ref="child"/>
        <el-button @click="btn">点击</el-button>
    </div>
</template>

import Child from './child'
export default {
    data(){
        return{
        }
    },
    components: {
        Child
    },
    methods:{
        btn(){
            this.$refs.child.methChild('调用子组件方法的同时也可以传值过去')
        }
    }
}
</script>

子组件

methods:{
   methChild(msg){
       console.log(msg)
   }
}

结果如下
在这里插入图片描述
第二种方法