【Vue.js】믹스인의 사용법과 주의

소개

일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 제대로 기억하지 않으면 우선 그런 것을 비망록으로 1개 1개 남겨 둔다.

믹스인 사용법 및 주의

믹스 인이란?

Vue.js 인스턴스의 옵션 1을 공통화하고 재사용할 수 있도록 하는 메커니즘.
아래의 예에서는 import { tokyoNumber } from "@/tokyoNumber"; 로 하고 있는 부분에서 믹스 인 tokyoNumber 를 읽어들입니다.

CountNumber.vue

<template>
  <div>
    <h2>{{ title | upperCase }}</h2>
    <h4>{{ subTitle | lowerCase }}</h4>
    <p>{{ number }}</p>
    <button type="button" class="btn btn-primary" @click="number++">+1</button>
  </div>
</template>

<script>
import { tokyoNumber } from "@/tokyoNumber";
export default {
  mixins: [tokyoNumber],
  /** ミックスインにより以下は宣言する必要がなくなる */
  //   data() {
  //     return {
  //       title: "Welcome to Tokyo",
  //       subTitle: "Tokyo is a great city",
  //       number: 0,
  //     };
  //   },
  //   filters: {
  //     upperCase(value) {
  //       return value.toUpperCase();
  //     },
  //     lowerCase(value) {
  //       return value.toLowerCase();
  //     },
  //   },
};
</script> 

tokyoNumber.js

export const tokyoNumber = {
    data() {
        return {
            title: "Welcome to Tokyo",
            subTitle: "Tokyo is a great city",
            number: 0,
        };
    },
    filters: {
        upperCase(value) {
            return value.toUpperCase();
        },
        lowerCase(value) {
            return value.toLowerCase();
        },
    },
    created() {
        console.log('created in Mixin');
    },
}

소스 코드 전체는 이하.

믹스인에 정의된 옵션과 동일한 옵션이 구성 요소에 있는 경우 구성 요소 옵션으로 덮어쓰기

아래의 예에서는 data 의 title: "Welcome to Los", 가 믹스 인의 title: "Welcome to Tokyo", 된다.

이미지의 소스 코드는 아래 (tokyoNumber.js는 위와 동일)

CountNumber.vue

<template>
  <div>
    <h2>{{ title | upperCase }}</h2>
    <h4>{{ subTitle | lowerCase }}</h4>
    <p>{{ number }}</p>
    <button type="button" class="btn btn-primary" @click="number++">+1</button>
  </div>
</template>

<script>
import { tokyoNumber } from "@/tokyoNumber";

export default {
  mixins: [tokyoNumber],
  data() {
    return {
      title: "Welcome to Los",
    };
  },
};
</script>

vue.App.vue

<template>
  <div>
    <!-- 省略 -->
    <h2>{{ title | upperCase }}</h2>
    <h4>{{ subTitle | lowerCase }}</h4>
    <p>{{ number }}</p>
    <button type="button" class="btn btn-primary" @click="number++">+1</button>
    <hr />
    <CountNumber></CountNumber>
  </div>
</template>

<script>
import CountNumber from "./CountNumber.vue";
import { tokyoNumber } from "@/tokyoNumber";

export default {
  mixins: [tokyoNumber],
  components: {
    CountNumber,
  },
  // 省略
};
</script>

※단, 라이프사이클 훅 함수 2 에서는, 믹스 인의 옵션 컴퍼넌트의 옵션의 양쪽 모두가 적용되어, 믹스 인의 옵션→컴퍼넌트의 옵션의 순서로 실행된다.


소스 코드 전체는 이하.

글로벌 믹스 인과 그 주의점

글로벌 믹스 인이란?

글로벌 믹스 인은, Single File Component의 글로벌 등록·커스텀 디렉티브의 글로벌 등록등과 같고 글로벌하게 믹인을 등록하는 일.
글로벌 믹스 인 옵션, 로컬 믹스 인 (컴포넌트의 title: "Welcome to Los", 에 선언) 옵션, 컴포넌트 옵션의 3개의 Vue 인스턴스 옵션이 존재하지만 각각 아래 순서로 적용된다. 같은 옵션이 있으면 컴퍼넌트의 그것으로 덧쓰기된다.

글로벌 믹스 인 옵션에 선언된 내용

로컬 믹스 인 (컴퍼넌트의 mixins: 에 선언)의 옵션에 선언된 내용

컴퍼넌트의 옵션에 선언된 내용

주의점

다만, 믹스 인의 글로벌 등록을 행하면, 자동적으로 모두 컴포넌트에 대해 믹스 인이 등록되게 되어, 이하의 화상으로 알 수 있듯이 복잡해져 알기 어려워진다. 그래서 기본은 글로벌 믹스 인은 사용하지 않는다.
라이프사이클 후크의 mixins: 옵션을 가지는 글로벌 믹스 인을 정의했을 때의, 콘솔 상태가 아래의 그림.


※글로벌 믹스 인을 사용하는 장면은, 플러그 인등으로 모든 컴퍼넌트에 적용시키고 싶은 무언가를 정의했을 때 등에 한정하는 것이 득책.

소스 코드 전체는 이하.

Vue.js 공부 메모 목록 기사 링크

Vue.js에 대해 공부했을 때 작성한 공부 메모 기사 링크를 집계 한 기사.

htps : // 코 m / 유타 카타 야마 - 23 / ms / 다베 fb59d16 아 83f1 아 1d4

data(){}, filters(){} 등 ↩

https://qiita.com/yuta-katayama-23/items/578bb0cecf165fd850db#vue%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3% E3%82%B9%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3% 83%AB  ↩