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

最新推荐文章于 2025-02-12 14:11:49 发布

原创最新推荐文章于 2025-02-12 14:11:49 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍在Vue中如何通过$emit实现子组件调用父组件的方法。具体步骤包括：父组件注册监听子组件触发的事件，并定义处理方法；子组件通过this.$emit触发事件并传递参数。注意事件名称大小写需一致。

vue中子组件调用父组件中的方法使用$emit

//父组件
<template>
    <div>
        <child @parentmethod="test"></child>
    </div>
</template>

<script>
    import child from "./child";
    export default{
        components:{
            child
        },
        methods:{
            test(param){
                   console.log(param);
            }
        }
    }
</script>

//子组件
<template>
    <div>
        <button @click="btnMethod">点击</button>
    </div>
</template>
<script>
    export default{
        methods:{
            btnMethod(){
                this.$emit('parentmethod', "11");
            }
        }
    }
</script>

注意点：@后边跟的和$emit中的方法名所有字母都小写（有驼峰结构的要注意）