Vue.js Components 재 사용
컴포넌트 패턴 참조 사이트
https://github.com/JaewonDH/vue-components-pattern
mixin
1. 폴더 생성
- src 하위에 mixins 폴더 생성 후 testMixin.js 파일 생성
2. testMixin.js
공통으로 사용할 data 및 함수를 선언 한다.
export const testMixin = {
data(){
return{
count:0
}
},
methods:{
plusCount(){
console.log('testMixin.js plusCount');
this.count++;
},
minusCount(){
this.count--
}
}
}
3. testMixin.js 사용하기
- testMixin.js import 한다.
- testMixin.js에 선언 된 data의 count 와 methods plusCount를 사용 할 수 있다.
- 주의 사항으로 testMixin.js에 선언한 함수와 Components의 함수이름이 동일 할 경우 mixin인의 함수가 호출 되는 것이 아닌 현재 Components의 선언 되어있는 함수가 호출 되어 사용할 때 주의 해야 된다.
<template>
<div id="app">
<span>Count {{count}}</span>
<button @click="onClick">plus</button>
</div>
</template>
<script>
import {testMixin} from '@/mixins/testMixin.js';
export default {
mixins:[testMixin],
name: 'App',
methods:{
onClick(){
this.plusCount();
},
plusCount(){
console.log('app.vue plusCount');
}
}
}
</script>
extends
1.폴더 생성
- source 하위 폴더에 extends 폴더를 만들고 상속할 컴포넌트를 하나 생성한다. test.vue
2. component 생성
- 공통으로 사용할 data 및 함수를 선언 한다.
<template>
<div>
템플릿 코드 !!!!!
</div>
</template>
<script>
export default {
data(){
return{
count:0
}
},
methods:{
plusCount(){
console.log('testMixin.js plusCount');
this.count++;
},
minusCount(){
this.count--
}
}
}
</script>
<style>
</style>
3. component extends하여 사용하기
- testExtend import 한다.
- extends 프로퍼티를 만들고 import 한 testExtend 추가하여 상속하여 testExtend 있는 함수와 data를 사용 할 수 있다.
extends에는 한개의 component만 사용이 가능
- mixin인와 비슷하게 data의 함수의 이름이 동일할 경우 상속한 component의 함수가 호출 되는 것이 아닌 현재 Components의 선언 되어있는 함수가 호출 되어 사용할 때 주의 해야 된다.
<template>
<div id="app">
<span>Count {{count}}</span><br>
<button @click="onClickPlus">plus</button> <br>
<button @click="onClickMinus">minus</button>
</div>
</template>
<script>
import testExtend from '@/extends/testExtend'
export default {
extends: testExtend,
name: 'App',
methods: {
onClickPlus() {
this.plusCount();
},
onClickMinus() {
this.minusCount();
}
}
}
</script>
plugin
1.폴더 생성
- source 하위 폴더에 plugins 폴더를 만들고 testPlugin.js 파일을 만든다
2. plugin 파일 생성
class Calculator {
constructor() {
this.value = 0;
}
plus() {
this.value++;
}
minus() {
this.value--;
}
getValue() {
return this.value;
}
}
export default {
install: (Vue, options) => {
Vue.globalMethod = () => {
console.log('call globalMethod');
};
// inject component options
// 플러그인을 통해, 믹스인 옵션도 주입이 가능
Vue.mixin({
beforeCreate() {
console.log('option', options);
}
});
// add instance property
Vue.prototype.$calculator = new Calculator();
}
}
3. plugin 사용하기
- main.js에 생성한 plugin을 import 후 Vue.use로 옵션 및 생성한 plugin 전달
import Vue from 'vue'
import App from './App.vue'
import testPlugin from './plugins/testPlugin'
Vue.config.productionTip = false
Vue.use(testPlugin,{name:'jjjjj'});
new Vue({
render: h => h(App),
}).$mount('#app')
- component에서 글로벌 plugin 사용하기
<template>
<div id="app">
</div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'App',
created(){
this.$calculator.plus();
console.log(this.$calculator.getValue());
Vue.globalMethod();
},
}
</script>
Author And Source
이 문제에 관하여(Vue.js Components 재 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@ljwasboy/mixin으로-컴포넌트-데이터-재-사용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- src 하위에 mixins 폴더 생성 후 testMixin.js 파일 생성
공통으로 사용할 data 및 함수를 선언 한다.
export const testMixin = {
data(){
return{
count:0
}
},
methods:{
plusCount(){
console.log('testMixin.js plusCount');
this.count++;
},
minusCount(){
this.count--
}
}
}
- testMixin.js import 한다.
- testMixin.js에 선언 된 data의 count 와 methods plusCount를 사용 할 수 있다.
- 주의 사항으로 testMixin.js에 선언한 함수와 Components의 함수이름이 동일 할 경우 mixin인의 함수가 호출 되는 것이 아닌 현재 Components의 선언 되어있는 함수가 호출 되어 사용할 때 주의 해야 된다.
<template>
<div id="app">
<span>Count {{count}}</span>
<button @click="onClick">plus</button>
</div>
</template>
<script>
import {testMixin} from '@/mixins/testMixin.js';
export default {
mixins:[testMixin],
name: 'App',
methods:{
onClick(){
this.plusCount();
},
plusCount(){
console.log('app.vue plusCount');
}
}
}
</script>
1.폴더 생성
- source 하위 폴더에 extends 폴더를 만들고 상속할 컴포넌트를 하나 생성한다. test.vue
2. component 생성
- 공통으로 사용할 data 및 함수를 선언 한다.
<template> <div> 템플릿 코드 !!!!! </div> </template> <script> export default { data(){ return{ count:0 } }, methods:{ plusCount(){ console.log('testMixin.js plusCount'); this.count++; }, minusCount(){ this.count-- } } } </script> <style> </style>
3. component extends하여 사용하기
- testExtend import 한다.
- extends 프로퍼티를 만들고 import 한 testExtend 추가하여 상속하여 testExtend 있는 함수와 data를 사용 할 수 있다.
extends에는 한개의 component만 사용이 가능
- mixin인와 비슷하게 data의 함수의 이름이 동일할 경우 상속한 component의 함수가 호출 되는 것이 아닌 현재 Components의 선언 되어있는 함수가 호출 되어 사용할 때 주의 해야 된다.
<template> <div id="app"> <span>Count {{count}}</span><br> <button @click="onClickPlus">plus</button> <br> <button @click="onClickMinus">minus</button> </div> </template> <script> import testExtend from '@/extends/testExtend' export default { extends: testExtend, name: 'App', methods: { onClickPlus() { this.plusCount(); }, onClickMinus() { this.minusCount(); } } } </script>
plugin
1.폴더 생성
- source 하위 폴더에 plugins 폴더를 만들고 testPlugin.js 파일을 만든다
2. plugin 파일 생성
class Calculator {
constructor() {
this.value = 0;
}
plus() {
this.value++;
}
minus() {
this.value--;
}
getValue() {
return this.value;
}
}
export default {
install: (Vue, options) => {
Vue.globalMethod = () => {
console.log('call globalMethod');
};
// inject component options
// 플러그인을 통해, 믹스인 옵션도 주입이 가능
Vue.mixin({
beforeCreate() {
console.log('option', options);
}
});
// add instance property
Vue.prototype.$calculator = new Calculator();
}
}
3. plugin 사용하기
- main.js에 생성한 plugin을 import 후 Vue.use로 옵션 및 생성한 plugin 전달
import Vue from 'vue'
import App from './App.vue'
import testPlugin from './plugins/testPlugin'
Vue.config.productionTip = false
Vue.use(testPlugin,{name:'jjjjj'});
new Vue({
render: h => h(App),
}).$mount('#app')
- component에서 글로벌 plugin 사용하기
<template>
<div id="app">
</div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'App',
created(){
this.$calculator.plus();
console.log(this.$calculator.getValue());
Vue.globalMethod();
},
}
</script>
Author And Source
이 문제에 관하여(Vue.js Components 재 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@ljwasboy/mixin으로-컴포넌트-데이터-재-사용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- source 하위 폴더에 plugins 폴더를 만들고 testPlugin.js 파일을 만든다
class Calculator {
constructor() {
this.value = 0;
}
plus() {
this.value++;
}
minus() {
this.value--;
}
getValue() {
return this.value;
}
}
export default {
install: (Vue, options) => {
Vue.globalMethod = () => {
console.log('call globalMethod');
};
// inject component options
// 플러그인을 통해, 믹스인 옵션도 주입이 가능
Vue.mixin({
beforeCreate() {
console.log('option', options);
}
});
// add instance property
Vue.prototype.$calculator = new Calculator();
}
}
- main.js에 생성한 plugin을 import 후 Vue.use로 옵션 및 생성한 plugin 전달
import Vue from 'vue'
import App from './App.vue'
import testPlugin from './plugins/testPlugin'
Vue.config.productionTip = false
Vue.use(testPlugin,{name:'jjjjj'});
new Vue({
render: h => h(App),
}).$mount('#app')
- component에서 글로벌 plugin 사용하기
<template>
<div id="app">
</div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'App',
created(){
this.$calculator.plus();
console.log(this.$calculator.getValue());
Vue.globalMethod();
},
}
</script>
Author And Source
이 문제에 관하여(Vue.js Components 재 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ljwasboy/mixin으로-컴포넌트-데이터-재-사용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)