[javascript] 컴포넌트 외부에서 Vue.js 컴포넌트 메소드 호출

JAVASCRIPT / 글쓴이

자식 구성 요소가있는 기본 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');
   }
}