用组件调用父方法

Question

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

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

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

Answer 1

您可以将 $root like this 与 vanilla Vue 一起使用，但是，如果您将 nuxt 与 vue 一起使用，则该响应将不起作用。为什么？因为$root 本身就是nuxt。让我给你举个例子：

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

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

• $children[0]:这是 nuxtloading。

• $children[1]:这是你的主要组件，在我的例子中，它是一个包含一些全局组件和一个全局 mixin 的基本布局。

• $children[n]：您应用中的其他组件。

希望对你有帮助。

Answer 2

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

首选方法是：

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

来自尼尔斯对Vue.js inheritance call parent method的回答：

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

进一步阅读

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

Answer 3

在当前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 4

直接来自 Vue.js documentation:

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

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

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

Answer 5

是的！

可以从子级调用父级方法，非常简单。

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

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

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