Вызов метода компонента Vue JS извне компонента

Question

Вызов метода компонента 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();

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

2111 6

javascript vue.js

6 ответов:

Comments

Ничего не найдено.

harryg · Accepted Answer · 2017-11-29 16:25:17

В конце концов я выбрал для использования Vue в ref директива. Это позволяет ссылаться на компонент из родительского объекта для прямого доступа.

например.

есть compenent, зарегистрированный на моем родительском экземпляре:
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/)

Helder Lucas · Accepted Answer · 2017-01-08 20:58:35

вы можете использовать Vue event system
vm.$broadcast('event-name', args)
и
 vm.$on('event-name', function())
вот скрипка: http://jsfiddle.net/hfalucas/wc1gg5v4/59/

musicformellons · Accepted Answer · 2018-08-31 17:42:51

В Vue2 это относится:
var bus = new Vue()
// в методе компонента A
bus.$emit('id-selected', 1)
// в компоненте B создан крюк
bus.$on('id-selected', function (id) {

  // ...
})
посмотреть здесь для документов Vue. И здесь более подробно о том, как точно настроить эту шину событий.

Если вы хотите получить дополнительную информацию о том, когда использовать свойства, события и / или централизованное управление состоянием см. в этой статье.

roli roli · Accepted Answer · 2018-09-01 09:07:22

Предположим, у вас есть дочерний компонент child_component:
<template>
  <h1>I am the child component</h1>
</template>

export default {
    name: 'child-component',
    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>
    </div>
</template>

export default {
    name: 'parent-component',
    methods: {
        exec () {
            this.$refs.child.child_method() //execute the method belong to child
        }
    }
}
если вы хотите выполнить метод родительского компонента из компонента ребенка:

this.$parent.name_of_method()

примечание: не рекомендуется обращаться к дочернему и родительскому компоненту, как это. Если вы хотите связи между компонентами обязательно используйте vuex или event bus

Pratik Khadtale · Accepted Answer · 2018-05-07 14:02:39

вот простой пример
this.$children[indexOfComponent].childsMethodName();

Dotnetgang · Accepted Answer · 2018-06-28 20:31:18

Это простой способ доступа к методам компонента из другого компонента

// 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');
   }
}