Выполнение дочернего метода из родительского компонента в Vue.Яш

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

однако в этом случае я хочу выполнить метод в дочерних компонентах, когда кнопка в родитель кнопки. Как лучше всего это сделать?

8
javascript vue.js

3 ответов

один из предложенных способов является использование глобальный центр событий. Это позволяет осуществлять связь между любыми компонентами, имеющими доступ к концентратору.

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

var eventHub = new Vue();

Vue.component('child-component', {
  template: "<div>The 'clicked' event has been fired {{count}} times</div>",
  data: function() {
    return {
      count: 0
    };
  },
  methods: {
    clickHandler: function() {
      this.count++;
    }
  },
  created: function() {
    // We listen for the event on the eventHub
    eventHub.$on('clicked', this.clickHandler);
  }
});

new Vue({
  el: '#app',
  methods: {
    clickEvent: function() {
      // We emit the event on the event hub
      eventHub.$emit('clicked');
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

<div id="app">
  <button @click="clickEvent">Click me to emit an event on the hub!</button>
  <child-component></child-component>
</div>
4

вот простой, который работал для меня

this.$children[indexOfComponent].childsMethodName();
1

вы можете создать ниже вспомогательный метод в методах в Родительском компоненте:

getChild(name) {
    for(let child of this.$children) if (child.$options.name==name) return child;
},

и вызовите метод дочернего компонента таким образом:

this.getChild('child-component-tag-name').childMethodName(arguments);

Я не тестирую его для Vue > =2.0

0