여러 파일 간에 메소드를 호출하는 여러 가지 방법 Vue

Vue 개발에서는 일반적으로 개발을 위해 단일 파일 구성 요소(.vue 파일)를 사용하고 구성 요소를 분할하여 코드의 가독성과 유지 관리성을 향상시킵니다. 그러나 여러 단일 파일 구성 요소 간에 메서드를 호출하면 몇 가지 문제가 발생할 수 있습니다. 이 기사에서는 Vue의 여러 파일 간에 메서드를 호출하는 여러 가지 방법을 소개합니다.

1. Mixin(Mixin) 사용

Mixin은 Vue에서 제공하는 매우 편리한 방법으로 일부 공개 코드를 캡슐화하여 여러 구성 요소 간에 공유할 수 있습니다. Mixin에서 공유해야 하는 메서드를 작성하고 이 Mixin을 이러한 메서드를 사용해야 하는 구성 요소에 도입할 수 있습니다.

예를 들어 showMsg 메서드가 포함된 Mixin 파일 mixin.js가 있습니다.

export default {
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
}

showMsg 메서드를 사용하려는 구성 요소에 mixin.js만 도입하면 됩니다.

import mixin from './mixin.js'

export default {
  mixins: [mixin],
  ...
}

위 코드에서는 mixins 속성을 사용하여 mixin.js의 코드를 도입하고 컴포넌트에 추가했습니다.

이런 식으로 컴포넌트에서 showMsg 메소드를 사용할 수 있습니다.

this.showMsg()

2. this.$refs를 사용하세요

Vue에서 컴포넌트를 정의할 때 ref 속성을 설정할 수 있고 컴포넌트에서 이 컴포넌트 인스턴스를 참조할 수 있습니다. 이 참조는 현재 구성 요소의 메서드를 호출하는 데 사용할 수 있습니다.

예를 들어, 구성 요소 A와 구성 요소 B라는 두 가지 구성 요소가 있습니다. 구성 요소 A는 구성 요소 B의 메서드를 호출합니다. 이는 다음 단계를 통해 달성할 수 있습니다.

1. 구성 요소 B에서 ref 속성을 설정

<template>
  <div>
    组件B
  </div>
</template>

<script>
export default {
  methods: {
    methodOfB() {
      console.log('methodOfB')
    }
  }
}
</script>

<template>
  <div>
    <component-b ref="b"></component-b>
  </div>
</template>

<script>
import ComponentB from './ComponentB.vue'

export default {
  components: {ComponentB},
  methods: {
    methodOfA(){
      this.$refs.b.methodOfB()
    }
  }
}
</script>

메서드 구성 요소 A에서 구성 요소 B의 인스턴스를 가져오고 구성 요소 B의 메서드를 사용하려면 this.$refs.b를 사용합니다.

3. vuex 사용

Vuex는 Vue에서 공식적으로 제공하는 상태 관리 도구로, 여러 구성 요소 간에 데이터를 공유하는 데 매우 편리합니다. 또한 여러 구성 요소에서 사용할 수 있도록 Vuex에서 일부 공개 메서드를 정의할 수도 있습니다.

예를 들어 공개 메소드가 정의된 store.js 파일이 있습니다.

export default new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...},
  methods: {
    showMsg() {
      console.log('hello world')
    }
  }
})

이 공개 메소드를 사용해야 하는 구성요소에서 Vuex에서 제공하는 mapActions 메소드를 사용하여 이 메소드를 구성요소에 매핑할 수 있습니다. .

import { mapState, mapMutations, mapActions } from 'vuex'

computed: {
  ...mapState(['...']),
},
mutations: {
  ...mapMutations(['...']),
},
actions: {
  ...mapActions(['showMsg']),
}

이렇게 하면 구성 요소에서 showMsg 메서드를 사용할 수 있습니다.

4. EventBus 사용

Vue의 자체 EventBus를 사용하여 구성 요소 간 통신을 수행하고, 공유해야 하는 메서드를 EventBus에 바인딩할 수 있으며, 다른 구성 요소에서는 이러한 메서드를 사용할 수 있습니다.

예를 들어 main.js에서 EventBus를 생성합니다.

import Vue from 'vue'

export const EventBus = new Vue()

공유 메서드를 사용해야 하는 구성 요소에서는 EventBus.$on 메서드를 사용하여 이벤트를 수신하여 공유 메서드 호출 메시지를 얻을 수 있습니다.

mounted(){
  EventBus.$on('showMsg', ()=>{this.showMsg()})
},

공유 메서드가 있는 구성 요소에서는 EventBus.$emit 메서드를 사용하여 showMsg 이벤트를 트리거할 수 있습니다.

EventBus.$emit('showMsg')

요약

위는 Vue에서 여러 파일 간에 메서드를 호출하는 여러 가지 방법입니다. Mixin, this.$refs, Vuex 및 EventBus를 통해 우리는 여러 구성 요소에서 메서드를 공유해야 할 필요성을 쉽게 인식할 수 있습니다. 실제 개발에서는 실제 상황에 따라 자신에게 맞는 방법을 선택할 수 있습니다.

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