vue.2(mixin)

mixin : 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법

-> 상속 개념

 

왜 쓰나

: component를 n개 만들어 사용하는 경우 => 유지/보수가 어렵다는 문제점이 있다

=> mixin.js를 만들어서 가져다 쓰면 병합 가능해서 유지/보수가 쉽고 보기도 편함

 

 

 

---

1. 적용 순서

//mixin.js

const hiMixin = {
	mounted() {
    	console.log("HEllO");
    }
}

 

//App.vue

export default {
	name: 'App',
    mixin: [hiMixin],
    mounted() {
    	console.log("nope")
    }
}

이렇게 mixin 사용 후에 다른 객체를 입력하면 

 

->"HELLO"
->"nope"

표시된다.

 

▶중복된 method는 순서에 따라 실행됨

 

 

---

2. 덮어쓰기 가능

//hiMixin

const hiMixin = {
    methods: {
        sayHello: function() {
            console.log("hello!")
        }
    },
    mounted() {
        this.sayHello()
    }
}

//App.vue

export default {
  name: 'App',
  mixin: [hiMixin],
  methods: {
    sayHello: function() {
      console.log("KKKKKKK")
    }
  },
  mounted() {
    this.sayHello()
  },
  components: {
  }
}

 

KKKKKK

 

 

 

 

 

참고 : https://kr.vuejs.org/v2/guide/mixins.html