'내보내기 기본값' 외부의 구성 요소에서 VueJS 메서드를 호출하십시오.

'내보내기 기본값' 외부의 구성 요소에서 VueJS 메서드를 호출하십시오.

밖에서 '방법' 안에 있는 기능을 '방법'이라고 부르려고 한다.하지만, 그것은 효과가 없다.

Github 발행 건도 https://github.com/vuejs/vue/issues/329

vm.test(); // call a function in method, not working
this.vue.test()  // not working
export default {
  methods: {
    test: function() {
      alert('test fuction called');
    }
  }
}

원본 포스터의 실제 목표가 무엇인지 잘 알 수 없지만, 이렇게 만들어 Vue 인스턴스(instance)에서 메서드를 다음과 같이 부를 수 있다.

var viewModel = new Vue({
    el: "#app",
  data: {
    msg: "Hello there"
  },
  methods: {
    test: function() {
      alert('test fuction called');
    }
  }
});

viewModel.test();

작업 예: https://jsfiddle.net/Daryn/Lja7pake/3/

단일 파일 구성 요소를 내보내는 경우 다음을 수행하십시오.

예제.js

<script>
   export default {
    methods: {
      test: function() {
      alert('test fuction called');
     }
    }
   }
</script>

main.js.

<script>
    import Thing from './example.js';
    Thing.test();
</script>

참조: https://vuejs.org/v2/guide/single-file-components.html

당신이 성취하려고 하는 것은 근본적으로 결함이 있다.특정 구성 요소의 인스턴스에 대한 참조가 없는 한 구성 요소의 메서드를 호출할 수 없다.코드에서 어떤 특정 구성 요소가vm언급하는 것은?

모듈에서 Vue 구성 요소 정의를 내보내는 것뿐입니다. 여기서는 구성 요소를 인스턴스화하지 마십시오.

우리는 대체 해결책을 제공하기 위해 당신의 코드를 더 많이 보거나 당신이 정확히 무엇을 달성하려고 하는지에 대한 완전한 설명을 봐야 할 것이다.(왜 구성요소의 메소드를 정의 밖이라고 부르려고 하는가?)

export default {
  ...
  methods: {
    ...
  },
  mounted () {
    EventBus.$on(‘EVENT_NAME’, function (payLoad) {
      ...
    });
  }
}

이것이 내가 그 문제를 해결한 방법이다.

이 데모를 목적으로 Vue/CLI를 사용하여 새 프로젝트를 생성한다.설치가 끝나면 VM을 글로벌에 노출시킨다.개방하다src/main.js다음과 같이 편집하십시오.

src/main.js

import Vue from 'vue';
import App from './App.vue';

var vm = new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

// Add this line (tambahkan baris berikut):
window.vm = vm;

생성된 항목 그대로 두기App.vue있는 그대로따라서 VM의 첫 번째 자식(으)vm.$children[0])은App.vue.

우리는 그것을 안다.App.vue아이를 낳다그렇게 되다HelloWorld.vue구성 요소(vm의 하위 항목)vm.$children[0].$children[0]). 이것을 알면, 우리는 외부에서 그 방법을 호출할 수 있다.'export default' 다음과 같은 경우:

src/구성원/HelloWorld.vue

<template>
  <div class="hello">
    <button 
      id="sebuahButton" 
      class="btn btn-outline-secondary btn-sm" 
      type="button"
    >Click Me, Jose!</button>
    <h1>{{ msg }}</h1>
    <!-- and some stuff, vue cli default generated code -->
  <div>
</template>

<script>
(function() {
    // wait for the DOM ready event in plain JavaScript
    document.addEventListener("DOMContentLoaded", event => {
        document.getElementById("sebuahButton").onclick = function() {
            vm.$children[0].$children[0].someAction();
        };
    });
})();

export default {
    name: "HelloWorld",
    props: {
        msg: String
    }
    methods: {
        someAction () {
            // do something (lakukan sesuatu masbro!)
            console.log("It's been called from outer space, Luke!");
        }
    }
}
</script>

참조URL: https://stackoverflow.com/questions/44886698/call-a-vuejs-method-inside-a-component-outside-export-default