Вызовите родительский метод с компонентом

У меня есть компонент и хочу добавить прослушиватель кликов, который запускает метод в родительском шаблоне в Vue. Это возможно?

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

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

Ответы

Ответ 1

Непосредственно из документации Vue.js:

В Vue отношение родительского и дочернего компонентов можно суммировать как реквизиты вниз, события вверх. Родитель передает данные дочернему устройству через реквизит, а потом отправляет сообщения родителям через события...

Таким образом, вам нужно выпустить событие click из вашего дочернего компонента, когда что-то произойдет, и затем его можно использовать для вызова метода в родительском шаблоне.

Если вы не хотите явно выделять событие из дочернего элемента (используя this.$emit('click') из вашего дочернего компонента), вы также можете попытаться использовать собственное событие click, @click.native="someMethod",

Ответ 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>

Примечание. Хотя это не рекомендуется делать, когда вы создаете отключенные повторно используемые компоненты, иногда мы создаем связанный компонент, который не используется повторно, и в этом случае он очень удобен.

Ответ 3

Предпочтительные методы:

Явно передайте методы в качестве свойств дочерним компонентам (так же, как и для передачи данных)
Или объявите глобальные методы как миксины

Полагание на вызов this.$parent скрывает зависимость и прерывается при использовании библиотек компонентов, которые создают более длинную дочернюю иерархию

От nils ответ на метод вызова родительского объекта Vue.js

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. Примеси

Если это обычная функциональность, которую вы хотите использовать в других местах, использование миксина может быть более идиоматичным:
var mixin = {
    methods: {
        someFunction: function() {
            // ...
        }
    }
};

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

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

Дальнейшее чтение:

Ответ 4

Вы можете либо передать родительский метод дочернему компоненту с помощью props либо вы можете заставить дочерний компонент генерировать пользовательское или собственное событие.

Вот Plunker, чтобы продемонстрировать оба подхода.

Ответ 5

В текущей версии Vue это решение:
Проходящий реквизит (родитель-ребенок)

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>

База на этом посте, должна быть изменена таким образом:

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

Ответ 6

Вы можете использовать $root как этот, но, если вы используете nuxt с vue @daxigu response, не сработает, потому что $root сам по себе nuxt. Что я могу сделать? Это:

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

$ root: Как я уже говорил, это пустое слово.
$ children [0]: загружает текст.
$ children1: - ваш основной компонент, в моем случае это был базовый макет с несколькими глобальными компонентами и глобальным миксином.

Надеюсь, это поможет.