Vue에서 메소드를 호출하는 방법

이제 Vue에서 외부적으로 메소드를 호출하는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

1. 먼저 공개 vue 구성요소를 정의합니다.

var eventHub = new Vue();

2. 생성된 이벤트 구성요소에서 $on을 사용하여 공개 구성요소 eventHub에 전달하고 번역이 사용자 정의되며 getCardNum(data)이 필요합니다.

eventHub.$on('translate', function (data) { 
        that.getCardNum(data); 
      });

3. 마지막으로 상위 구성 요소에서 음수 구성 요소는 var vm = new Vue({});

4 변수와 함께 저장되어야 합니다. 메서드에서 $emit을 사용하여 공용 구성 요소에서 메서드를 수신합니다.

var vm = new Vue({ 
 el: '#example', 
 data: { 
  msg: 'Hello Directive', 
  data: {} 
 }, 
 methods: { 
  getCardNum: function (data, on) { 
   eventHub.$emit('translate', data); 
  } 
 } 
});

5. 마지막으로 vue 구성 요소 외부 또는 파일 외부에서 getCardNum(data) 함수를 호출할 수 있습니다. onclick = vm을 사용할 수 있습니다. getCardNum()은 다음과 같이 호출됩니다. vm은 상위 구성 요소입니다

6. vue를 사용한 개발 프로세스 중에 상위 구성 요소의 변수 이름을 작성해야 합니다. , Java 백그라운드에서 팝업 페이지가 나타났습니다. 내 vue 구성 요소에서 메서드를 호출하려고 하는데 백그라운드의 팝업 페이지가 내 vue 구성 요소에 없습니다. 다른 페이지에서 호출하려는 vue의 메서드만 호출할 수 있습니다. 상위 컴포넌트에서 호출되기 때문에 오랫동안 연구한 결과, 컴포넌트의 function() 메소드를 최상위 상위 컴포넌트로 전달하고, negative 컴포넌트를 변수에 저장한 것으로 확인되었습니다. 마지막으로 다른 페이지에서 메서드를 직접 호출합니다. 호출 시 배경 페이지가 내 vue 구성 요소 내에 없기 때문에 호출은 onclick = vm.getCardNum()입니다. 상위 구성요소

위 내용은 모든 사람을 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Express는 쿼리 서버를 구축합니다

ProxyTable vue-cli 프로젝트의 도메인 간 문제

React 구성 요소에서 참조를 사용하는 방법

위 내용은 Vue에서 메소드를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!