vue父组件调用子组件中的方法

　康　

已于 2024-05-21 10:39:10 修改

阅读量5.7k

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-07-08 16:24:08 首次发布

本文链接：https://blog.csdn.net/qq_40047019/article/details/125680645

版权

vue 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

1、通过 ref 直接调用子组件的方法。

父组件

<template>
    <div>
        <button @click="handleClick">点击调用子组件方法</button>
        <Child ref="child"/>
    </div>
</template>

<script>
    import Child from './child';
    export default {
        methods: {
            handleClick() {
                this.$refs.child.childFun();
            },
        },
    }
</script>

子组件

<template>
    <div>我是子组件</div>
</template>

<script>
    export default {
        methods: {
            childFun() {
                console.log('我是子组件的方法');
            },
        },
    };
</script>

2、通过组件的$emit、$on方法。

父组件

<template>
    <div>
        <button @click="handleClick">点击调用子组件方法</button>
        <Child ref="child"/>
    </div>
</template>    

 
<script>
    import Child from './child';
    export default {
        methods: {
            handleClick() {
                this.$refs.child.$emit("childMethod"); 
            },
        },
    }
</script>

子组件

<template>
    <div>我是子组件</div>
</template>
<script>
    export default {
        mounted() {
            this.$nextTick(function() {
                this.$on('childMethod', function() {
                    console.log('我是子组件方法');
                });
            });
        },
    };
</script>