컴포넌트 외부에서 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.

편집하다

이것이 작동하는 것 같습니다 :

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

그러나 자식 배열의 색인으로 구성 요소를 참조하고 있기 때문에 이것은 좋은 해결책이 아니며 많은 구성 요소를 사용하면 일정하게 유지되지 않고 코드를 읽을 수 없습니다.

결국 나는 Vue의 ref지시문 을 사용하기로 결정했습니다 . 이를 통해 직접 액세스 할 수 있도록 부모에서 구성 요소를 참조 할 수 있습니다.

예 :

부모 인스턴스에 compenent를 등록하십시오.

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

컴포넌트를 참조로 template / 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 }
}

컴포넌트를 참조로 template / html로 렌더링하십시오.

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

컴포넌트 메소드에 액세스하십시오.

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

자식 구성 요소에 대한 참조를 설정하면 부모에서 $ 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()

나는 매우 간단한 해결책을 사용했습니다. Vanilla JS를 사용하여 선택한 Vue 구성 요소에 메소드를 호출하는 HTML 요소를 포함 시켰으며 클릭을 트리거합니다!

Vue Component에는 다음과 같은 내용이 포함되어 있습니다.

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

Vanilla JS를 사용하여 사용합니다.

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