Question

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

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

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

Answer 1

是！

可以从孩子那里调用父方法，这很容易。

每个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>

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

Answer 2

直接来自Vue.js documentation：

在Vue中，父子组件关系可以概括为道具向下，事件向上。父母通过道具将数据传递给孩子，孩子通过事件向父母发送消息......

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

如果您不想从孩子明确发出事件（使用子组件中的this.$emit('click')），您还可以尝试使用native click event，@click.native="someMethod"。< / p>

Answer 3

首选方法是：

明确将方法作为属性传递给子组件（与传递数据道具相同）
或将全局方法声明为mixins

依靠调用this.$parent会隐藏依赖性，并且在使用创建longer child hierarchy的组件库时会中断依赖性。

摘自Vue.js inheritance call parent method上nils的答案

1。传递道具（亲子）

var SomeComponentA = Vue.extend({
    methods: {
        someFunction: function () {
            // ClassA some stuff
        }
    }
});

var SomeComponentB = Vue.extend({
   props: [ 'someFunctionParent' ],
   methods: {
       someFunction: function () {
           // Do your stuff
           this.someFunctionParent();
       }
   }
});

以及SomeComponentA的模板中：

<some-component-b someFunctionParent="someFunction"></some-component-b>

2。 Mixins

如果这是您想在其他地方使用的常用功能，则使用mixin可能更惯用：

var mixin = {
    methods: {
        someFunction: function() {
            // ...
        }
    }
};

var SomeComponentA = Vue.extend({
    mixins: [ mixin ],
    methods: {
    }
});

var SomeComponentB = Vue.extend({
   methods: {
       someFunctionExtended: function () {
           // Do your stuff
           this.someFunction();
       }
   }
});

进一步阅读：

Answer 4

您可以通过props将父方法传递给子组件，也可以让子组件发出自定义事件或本机事件。

这里有Plunker来证明这两种方法。

Answer 5

在当前的vue版本中，此解决方案：
Passing props (parent-child)

var SomeComponentA = Vue.extend({
    methods: {
        someFunction: function () {
            // ClassA some stuff
        }
    }
});

var SomeComponentB = Vue.extend({
   props: [ 'someFunctionParent' ],
   methods: {
       someFunction: function () {
           // Do your stuff
           this.someFunctionParent();
       }
   }
});

HTML部分：

<some-component-b someFunctionParent="someFunction"></some-component-b>

应基于this post进行修改：

<some-component-b v-bind:someFunctionParent="someFunction"></some-component-b>

Answer 6

您可以使用$root like this，但是，如果将nuxt与vue一起使用，@daxigu response将不起作用，因为$root本身就是nuxt。我能做什么？这个：

this.$root.$children[1].myRootMethod()

$ root：：正如我之前说的，这是nuxt。
$ children [0]：正在加载。
$ children 1：是您的主要组件，在我的情况下，它是具有一些全局组件和全局mixin的基本布局。
< / li>

希望有帮助。

使用组件调用父方法

6 个答案:

摘自Vue.js inheritance call parent method上nils的答案

1。传递道具（亲子）

2。 Mixins