用组件调用父方法

Question

我有一个组件，想添加一个点击监听器，它在 Vue.js 的父模板中运行一个方法。这可能吗？

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

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

原文由 user2036108 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

直接来自 Vue.js 文档：

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

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

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

原文由 Lance Whatley 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

是的！

可以从孩子调用父方法，这非常容易。

每个 Vue 组件定义属性 $parent 。然后，您可以从此属性调用父级中存在的任何方法。

这是一个 JSFiddle： https ://jsfiddle.net/50qt9ce3/1/

 <script src="https://unpkg.com/vue"></script>

<template id="child-template">
    <span @click="someMethod">Click me!</span>
</template>

<div id="app">
  <child></child>
</div>

<script>
Vue.component('child', {
  template: '#child-template',
  methods: {
    someMethod(){
        this.$parent.someMethod();
    }
    }
});

var app = new Vue({
    el: '#app',
  methods: {
    someMethod(){
        alert('parent');
    }
    }
});
</script>

注意：虽然在构建断开连接的可重用组件时不建议这样做，但有时我们正在构建相关的不可重用组件，在这种情况下它非常方便。

原文由 Gudradain 发布，翻译遵循 CC BY-SA 3.0 许可协议