Javascript 使用组件调用父方法

Call parent method with component

提问by user2036108

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

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

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

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

采纳答案by Lance Whatley

Directly from the Vue.js documentation:

直接来自 Vue.js文档：

In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events...

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

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

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

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".

如果您不想显式地this.$emit('click')从子组件发出事件（使用来自您的子组件），您还可以尝试使用本机单击事件, @click.native="someMethod"。

回答by Gudradain

Yes!

是的！

It's possible to call a parent method from a child and it's very easy.

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

Each Vue component define the property $parent. From this property you can then call any method that exist in the parent.

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

Here is a JSFiddle that does it : https://jsfiddle.net/50qt9ce3/1/

这是一个 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>

Note: While it's not recommended to do this kind of thing when you are building disconnected reusable components, sometimes we are building related non-reusable component and in this case it's very handy.

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

回答by KyleMit

The prefered methods are to either:

首选方法是：

1. Explicitly pass methods as propertiesto child components (the same as passing data props)
2. Or declare global methods as mixins

1. 显式地将方法作为属性传递给子组件（与传递数据道具相同）
2. 或者将全局方法声明为 mixin

Relying on calling this.$parenthides the dependency and will break when you use component libraries which create a longer child hierarchy

依赖调用会this.$parent隐藏依赖关系，并且在您使用创建更长子层次结构的组件库时会中断

From nils's answer on Vue.js inheritance call parent method

来自 nils 对Vue.js 继承调用父方法的回答

1. 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();
       }
   }
});

and in the template of SomeComponentA:

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

2. Mixins

If this is common functionality that you want to use in other places, using a mixin might be more idiomatic:

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

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

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

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. 混合

如果这是您想在其他地方使用的常见功能，则使用 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();
       }
   }
});

Further Reading:

进一步阅读：

• Vue.js - Making helper functions globally available to single-file components
• Vue Docs Mixins

• Vue.js - 使辅助函数对单文件组件全局可用
• Vue 文档混合

回答by miqh

You can either pass the parent method down to the child component via propsor you can get the child component to emit either a custom or native event.

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

Here's a Plunkerto demonstrate both approaches.

这是一个Plunker来演示这两种方法。

回答by cswu

In current vue version, this solution:
Passing props (parent-child)

在当前的 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();
       }
   }
});

The HTML part:

HTML部分：

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

Base on this post, should be modified in this way:

基于这篇文章，应该这样修改：

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

回答by mrroot5

You can use $rootlike thisbut, If you use nuxt with vue @daxigu responsewon't work because the $rootis nuxt it self. What can I do? This:

您可以使用$root类似这样的，但是，如果你使用nuxt与VUE @daxigu响应将无法工作，因为$root是nuxt它的自我。我能做什么？这个：

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

• $root:As I said before, this is nuxt.

• $children[0]:is nuxtloading.

• $children1:is your main component, in my case, it was a base layout with a few global components and a global mixin.

• $root：正如我之前所说，这是nuxt。

• $children[0]：正在nuxtloading。

• $children 1：是你的主要组件，在我的例子中，它是一个带有一些全局组件和一个全局 mixin 的基本布局。

Hope it helps.

希望能帮助到你。