使用组件调用父方法 | 使用组件调用父方法

本文介绍了使用组件调用父方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个组件，想添加一个单击侦听器，该侦听器在 Vue 的父模板中运行一个方法.这可能吗?

I have a component and want to add a click listener that runs a method in the parent template in Vue. Is this possible?

<template>
    <custom-element @click="someMethod"></custom-element>
</template>

<script>
    export default {
        name: 'template',
        methods: {
            someMethod: function() {
                console.log(true);
        }
    }
</script>

推荐答案

直接来自 Vue.js 文档:

Directly from the Vue.js documentation:

在Vue中，父子组件的关系可以概括为props down，events up.父级通过 props 向下传递数据给子级，子级通过事件向父级发送消息......

因此，当发生某些事情时，您需要从子组件发出 click 事件，然后可以使用该事件调用父模板中的方法.

So you need to emit a click event from your child component when something happens, which can then be used to call a method in your parent template.

如果您不想显式地从子组件发出事件(使用子组件中的 this.$emit('click'))，您也可以尝试使用原生点击事件，@click.native="someMethod".

If you don't want to explicitly emit an event from the child (using this.$emit('click') from your child component), you can also try to use a native click event, @click.native="someMethod".

这篇关于使用组件调用父方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！