Vue 구성 요소 간의 메서드가 서로 호출합니다.

Vue 컴포넌트 개발에서는 컴포넌트가 서로 중첩될 수 있으며, 구조가 다른 컴포넌트는 서로의 메서드를 호출해야 하는 경우가 많습니다. 즉, 다른 구성 요소의 메서드를 호출하려면 구성 요소 내부에 메서드를 구현해야 합니다. 다음으로 Vue 컴포넌트 간의 메소드가 어떻게 서로 호출되는지 소개하겠습니다.

1. 상위 구성 요소를 통해

Vue 구성 요소 기반 개발에서는 각 구성 요소가 자체 상위 구성 요소를 가지며 구성 요소가 서로를 호출할 수 있습니다. 상위 구성 요소에서 메서드를 정의한 다음 하위 구성 요소의 $parent를 통해 상위 구성 요소에서 메서드를 호출할 수 있습니다.

먼저 상위 구성 요소에서 메서드를 정의합니다.

methods:{
  changeMsg:function(){
     this.msg='hello world';
  }
}

그런 다음 하위 구성 요소에서 this.$parent.changeMsg()를 사용하여 상위 구성 요소에서 메서드를 호출합니다.

2. 컴포넌트를 통한 참조

Vue의 컴포넌트 기반 개발에서는 하위 컴포넌트가 import를 통해 다른 컴포넌트를 도입할 수 있고, 하위 컴포넌트에서 컴포넌트를 도입하는 방식을 직접 호출할 수 있습니다.

컴포넌트 A에서 컴포넌트 B의 메서드를 호출한다고 가정합니다. 먼저 아래와 같이 컴포넌트 B를 컴포넌트 A에 도입해야 합니다.

import B from '../B.vue'
export default {
  components: {
    B
  },...

}

그런 다음 컴포넌트 A에서 this.$refs를 직접 사용하여 컴포넌트를 가져올 수 있습니다. B 인스턴스를 선택한 다음 구성 요소 B의 메서드를 호출합니다.

this.$refs.b.test();

3. Vuex를 통해

Vuex는 전역 상태를 쉽게 관리할 수 있는 Vue의 상태 관리 라이브러리입니다. Vuex에서 전역 메소드를 정의하고 컴포넌트의 $store.dispatch를 통해 전역 Vuex 메소드를 호출할 수 있습니다.

먼저 Vuex에서 메서드를 정의해야 합니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    msg:'hello',
  },
  mutations: {
    changeMsg(state){
      state.msg='hello world';
    }
  },
  actions:{
    changeMsg({commit}){
      commit('changeMsg');
    }
  }
})

export default store;

그런 다음 구성 요소에서 다음 코드를 사용하여 Vuex에서 메서드를 호출합니다.

this.$store.dispatch('changeMsg');

4. 이벤트 버스를 통해

Vue에서는 다음을 통해 수행할 수 있습니다. 이벤트 버스 구성요소 간 통신. 이 접근 방식은 이벤트를 애플리케이션의 다양한 부분에 배포하고 구성 요소 간에 데이터를 전달할 수 있게 해줍니다.

빈 Vue 인스턴스를 이벤트 버스로 만든 다음 구성 요소에서 이벤트 버스를 호출하여 이벤트를 트리거할 수 있습니다.

먼저 main.js에서 이벤트 버스로 Vue 인스턴스를 생성합니다:

Vue.prototype.$bus = new Vue()

그런 다음 구성 요소에서 다음 코드를 사용하여 이벤트를 트리거할 수 있습니다.

 this.$bus.$emit('EVENT_NAME', data)

마지막으로 다른 구성 요소에서 다음 코드를 사용하여 event:

this.$bus.$on('EVENT_NAME', data => {
    // handle event
})

위 4가지 메소드를 통해 Vue 컴포넌트 간 메소드를 구현하여 서로 호출할 수 있습니다. 실제 애플리케이션에서는 구성 요소 간 메서드 호출을 구현하는 데 가장 적합한 메서드를 선택할 수 있습니다.

위 내용은 Vue 구성 요소 간의 메서드가 서로 호출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!