VUE 기능의 다른 기능을 호출하는 방법

VUE에서 다른 기능을 호출하는 네 가지 방법이 있습니다 : 동일한 VUE 인스턴스 내에서 직접 호출 함수. 소품을 통해 함수를 전달하십시오. $ Emit을 통해 이벤트를 방출하고 상위 구성 요소 기능을 호출하십시오. $ refs를 사용하여 다른 구성 요소 인스턴스에서 직접 함수를 호출하십시오.

VUE에서 다른 기능을 호출하는 방법

Vue에서는 구성 요소 내에서 다양한 작업을 수행하기 위해 다른 기능을 호출 할 수 있습니다. 이것은 다음과 같은 방법으로 달성 할 수 있습니다.

1. 직접 전화하십시오

동일한 VUE 인스턴스 내에서 함수가 정의되면 다음 구문을 사용하여 직접 호출 할 수 있습니다.

 <code class="javascript">this.myFunction();</code>

2. 소품에 의해

기능이 상위 구성 요소에 정의되면 소품을 사용하여 하위 구성 요소로 전달할 수 있습니다.

 <code class="javascript">// 父组件<template> <child-component :my-function="myFunction"></child-component> </template> <script> export default { methods: { myFunction() { /* ... */ } } } </script> // 子组件<template> <button>调用父组件函数</button> </template> <script> export default { props: [&#39;myFunction&#39;], methods: { myFunction() { /* ... */ } } } </script></code>

3. $ eMit

함수가 자식 구성 요소에 정의되면 $emit 메소드를 사용하여 이벤트를 부모 구성 요소에 방출하여 부모 구성 요소에서 함수를 호출 할 수 있습니다.

 <code class="javascript">// 子组件<template> <button>调用父组件函数</button> </template> <script> export default { methods: { myFunction() { /* ... */ } } } </script> // 父组件<template> <child-component v-on:my-event="myFunction"></child-component> </template> <script> export default { methods: { myFunction() { /* ... */ } } } </script></code>

4. $ refs

다른 구성 요소 인스턴스에서 직접 함수를 호출 해야하는 경우 $refs 객체를 사용할 수 있습니다.

 <code class="javascript"><template> <child-component ref="child"></child-component> </template> <script> export default { mounted() { this.$refs.child.myFunction(); } } </script></code>

위 내용은 VUE 기능의 다른 기능을 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!