Виклик методу компонента Vue.js з-за межі компонента

Скажімо, у мене є головний екземпляр Vue, який містить дочірні компоненти. Чи існує спосіб виклику методу, що належить до одного з цих компонентів, поза інстанцією Vue цілком?

Ось приклад:

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

$('#external-button').click(function()
{
  vm['my-component'].increaseCount(); // This doesn't work
});

<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  
  <my-component></my-component>
  <br>
  <button id="external-button">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 5px;">
  <p>A counter: {{ count }}</p>
  <button @click="increaseCount">Internal Button</button>
    </div>
</template>

Отже, коли я натискаю внутрішню кнопку, increaseCount()метод прив'язується до події клацання, щоб його викликали. Немає можливості прив’язати подію до зовнішньої кнопки, чию подію натискання я слухаю за допомогою jQuery, тому мені знадобиться інший спосіб зателефонувати increaseCount.

EDIT

Здається, це працює:

vm.$children[0].increaseCount();

Однак це не гарне рішення, тому що я посилаю компонент на його індекс у дитячому масиві, і з багатьма компонентами це навряд чи залишатиметься постійним, а код є менш читабельним.

Врешті-решт я вирішив використовувати директиву Vueref . Це дозволяє посилатися на компонент від батьків для прямого доступу.

Напр

Зареєструйте компетентного в моєму батьківському екземплярі:

var vm = new Vue({
    el: '#app',
    components: { 'my-component': myComponent }
});

Візуалізуйте компонент у шаблоні / html із посиланням:

<my-component ref="foo"></my-component>

Тепер я в іншому місці можу отримати доступ до компонента зовнішньо

<script>
vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method
</script>

Дивіться цей приклад для прикладу: https://jsfiddle.net/xmqgnbu3/1/

(старий приклад за допомогою Vue 1: https://jsfiddle.net/6v7y6msr/ )

Оскільки Vue2 це стосується:

var bus = new Vue()

// у методі компонента A

bus.$emit('id-selected', 1)

// у компоненті B створений гачок

bus.$on('id-selected', function (id) {

  // ...
})

Ознайомтесь тут із документами Vue. І тут більш докладно про те , як налаштувати цей автобус події точно.

Якщо ви хочете отримати більше інформації про те, коли використовувати властивості, події та / або централізоване управління державою, див цю статтю .

Ви можете використовувати систему подій Vue

vm.$broadcast('event-name', args)

і

 vm.$on('event-name', function())

Ось скрипка: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

Трохи інша (простіша) версія прийнятої відповіді:

Зареєструйте компонент у батьківському екземплярі:

export default {
    components: { 'my-component': myComponent }
}

Візуалізуйте компонент у шаблоні / html із посиланням:

<my-component ref="foo"></my-component>

Доступ до методу компонентів:

<script>
    this.$refs.foo.doSomething();
</script>

Ви можете встановити ref для дочірніх компонентів, тоді в батьківському телефоні можна зателефонувати через $ refs:

Додати посилання на дочірній компонент:

<my-component ref="childref"></my-component>

Додати подію кліку до батьків:

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': { 
      template: '#my-template',
      data: function() {
        return {
          count: 1,
        };
      },
      methods: {
        increaseCount: function() {
          this.count++;
        }
      }
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <my-component ref="childref"></my-component>
  <button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>
</div>
  
<template id="my-template">
  <div style="border: 1px solid; padding: 2px;" ref="childref">
    <p>A counter: {{ count }}</p>
    <button @click="increaseCount">Internal Button</button>
  </div>
</template>

Скажіть, у вас є child_method()дочірній компонент:

export default {
    methods: {
        child_method () {
            console.log('I got clicked')
        }
    }
}

Тепер ви хочете виконати child_methodз батьківського компонента:

<template>
    <div>
        <button @click="exec">Execute child component</button>
        <child-cmp ref="child"></child_cmp> <!-- note the ref="child" here -->
    </div>
</template>

export default {
    methods: {
        exec () { //accessing the child component instance through $refs
            this.$refs.child.child_method() //execute the method belongs to the child component
        }
    }
}

Якщо ви хочете виконати метод батьківського компонента з дочірнього компонента:

this.$parent.name_of_method()

ПРИМІТКА. Не рекомендується отримувати доступ до дочірніх та батьківських компонентів, як це.

Натомість як найкраща практика використовуйте реквізити та події для спілкування батько-дитина.

Якщо ви хочете спілкуватися між компонентами, обов'язково використовуйте vuex або шину подій

Будь ласка, прочитайте цю дуже корисну статтю

Це простий спосіб отримати доступ до методів компонента з іншого компонента

// This is external shared (reusable) component, so you can call its methods from other components

export default {
   name: 'SharedBase',
   methods: {
      fetchLocalData: function(module, page){
          // .....fetches some data
          return { jsonData }
      }
   }
}

// This is your component where you can call SharedBased component's method(s)
import SharedBase from '[your path to component]';
var sections = [];

export default {
   name: 'History',
   created: function(){
       this.sections = SharedBase.methods['fetchLocalData']('intro', 'history');
   }
}

Ось простий

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

Я не впевнений, чи це правильний шлях, але це працює для мене.
Спочатку імпортуйте компонент, який містить метод, який ви хочете викликати у своєму компоненті

import myComponent from './MyComponent'

а потім викликати будь-який метод MyCompenent

myComponent.methods.doSomething()

Я використав дуже просте рішення. Я включив елемент HTML, який викликає метод, у свій Vue Component, який я вибираю, використовуючи Vanilla JS, і запускаю клацання!

У компонент Vue я включив щось таке:

<span data-id="btnReload" @click="fetchTaskList()"><i class="fa fa-refresh"></i></span>

Я використовую Vanilla JS:

const btnReload = document.querySelector('[data-id="btnReload"]');
btnReload.click();