Vue 혼합 작성 방법

Vue mixin은 Vue에서 제공하는 코드를 재사용하는 방법입니다. 이를 통해 옵션 세트를 정의한 다음 해당 옵션을 여러 구성 요소에서 공유할 수 있습니다. Vue 믹스인의 일반적인 용도 중 하나는 구성 요소에 필요한 계산된 속성, 메서드 및 반응형 데이터를 추가하는 것입니다. 이 글에서는 Vue 믹스인의 기본 개념과 일반적인 사용법을 소개하고 실제 예제와 코드를 제공합니다.

1. 기본 개념

Vue 믹스인은 실제로 모든 Vue 구성 요소 옵션을 포함할 수 있는 JavaScript 개체입니다. 일반적으로 믹스인은 일반적으로 사용되는 일부 계산 속성, 메서드 및 데이터를 정의하며 여러 구성 요소가 이러한 옵션을 공유할 수 있습니다.

mixin 개체를 구성 요소에 적용하면 mixin 개체의 옵션이 구성 요소의 옵션에 병합됩니다. 믹스인과 구성 요소가 모두 동일한 옵션을 정의하는 경우 구성 요소의 옵션이 믹스인의 옵션보다 우선 적용됩니다.

2. 기본 사용법

다음은 계산된 속성과 메서드를 정의하는 간단한 혼합 예제입니다.

const myMixin = {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    sayHello() {
      alert("Hello, " + this.fullName + "!")
    }
  }
}

이 혼합 개체에서는 firstName과 lastName을 연결하는 계산된 속성 fullName을 정의합니다. 호출 시 fullName을 사용하여 인사말 상자를 표시하는 sayHello 메서드도 정의되어 있습니다.

이제 이 믹스인 객체를 Vue 구성 요소에 적용할 수 있습니다. 아래 예를 참조하세요.

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
  // other component options...
})

이 구성 요소 정의에서는 myMixin을 구성 요소에 혼합한 다음 firstName 및 lastName 두 데이터 옵션을 포함한 일부 구성 요소 옵션을 정의합니다. myMixin에서 fullName 계산 속성과 sayHello 메서드를 혼합했으므로 이 두 옵션을 구성 요소에서도 사용할 수 있습니다.

이제 이 구성 요소에서 다음 옵션을 사용할 수 있습니다.

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

이 구성 요소는 firstName 및 lastName을 기반으로 fullName을 계산하여 페이지에 표시합니다. "Say Hello" 버튼을 클릭하면 sayHello 메소드가 호출되어 fullName이 포함된 인사말 상자가 표시됩니다.

3. 로컬 믹싱

믹싱은 전역 컴포넌트에 적용할 수 있을 뿐만 아니라 컴포넌트 내에서 로컬로 믹싱할 수도 있습니다. 다음은 글로벌 믹스인과 로컬 믹스인의 예입니다.

const myGlobalMixin = { // 全局混入
  // ...
}

const myLocalMixin = { // 局部混入
  // ...
}

Vue.component('my-component', {
  mixins: [myGlobalMixin, myLocalMixin],
  // ...
})

이 예에서는 먼저 글로벌 믹스인 myGlobalMixin을 정의한 다음 이를 구성 요소 정의에 혼합합니다. 동시에 myLocalMixin 로컬 믹스를 정의하고 이를 글로벌 믹스인과 함께 구성 요소에 혼합합니다. 로컬 믹스인은 글로벌 믹스인보다 우선순위가 높으므로 로컬 믹스인과 글로벌 믹스인 모두에 옵션이 나타나면 로컬 믹스인의 옵션이 사용됩니다.

4. Mixing 실행 순서

mix와 컴포넌트에 동일한 옵션이 존재할 경우, mix된 값이 컴포넌트의 원래 값을 덮어쓰게 됩니다. 그러나 다양한 믹스인과 구성 요소가 정의되는 순서는 최종 병합 옵션에 영향을 미칩니다. 일반적으로 믹스인의 옵션은 먼저 병합된 다음 구성 요소 옵션과 병합되지만, 믹스인과 구성 요소가 동일한 옵션을 정의하는 경우 구성 요소 옵션이 먼저 사용됩니다. 예는 다음과 같습니다.

const myMixin = {
  data() {
    return {
      message: 'Mixin Message'
    }
  }
}

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

이 예에서는 메시지 속성이 포함된 데이터 옵션을 정의하는 myMixin 믹스인을 정의합니다. 그런 다음 myMixin을 my-comComponent 구성 요소에 혼합하고 구성 요소에 동일한 데이터 옵션을 정의합니다. 이 구성 요소가 생성되면 "구성 요소 메시지"가 인쇄됩니다. 구성 요소에 정의된 메시지 속성이 믹스인의 속성보다 우선순위가 높기 때문입니다.

mixin 개체 및 구성 요소 옵션에서 mixin 옵션을 유지하려면 Vue.extend() 함수를 사용하여 mixin 개체를 만듭니다. 이는 모든 구성 요소 인스턴스에서 옵션이 유지되는 새로운 확장된 Vue 생성자를 나타냅니다. 예는 다음과 같습니다.

const myMixin = Vue.extend({
  data() {
    return {
      message: 'Mixin Message'
    }
  }
})

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

이 예에서는 Vue.extend() 함수를 사용하여 message 속성이 정의된 데이터 옵션이 포함된 mixin 객체 myMixin을 생성합니다. 그런 다음 myMixin을 my-composite 구성 요소에 혼합하고 이 구성 요소에 동일한 데이터 옵션을 정의합니다. 이 구성 요소가 생성되면 "Mixin Message"가 인쇄됩니다. 확장된 Vue 생성자에 정의된 속성은 구성 요소에 정의된 속성보다 우선순위가 높기 때문입니다.

5. 요약

Vue 하이브리드는 코드를 재사용하는 편리한 방법으로, 여러 구성 요소에 대한 공유 옵션을 제공하여 코드 재사용성을 향상시킵니다. 믹스인은 전역 및 로컬로 사용할 수 있습니다. Vue에서 믹스인을 사용하는 것은 기능을 빠르게 구현하고 코드 재사용성을 향상시키는 가장 좋은 옵션 중 하나입니다. 그러나 코드가 예상대로 작동하도록 하려면 믹스인 옵션의 우선순위와 병합 순서에 주의를 기울여야 합니다. 실제 개발에서는 먼저 필요에 따라 믹스인 개체를 정의한 다음 이를 믹스인 개체를 공유해야 하는 구성 요소에 혼합하여 코드 재사용을 달성할 수 있습니다.

위 내용은 Vue 혼합 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!