Vue Mixin( 믹스인 )

Vue

Nuxt

Mixin

데모보기

- index.vue

<template>

<div class="study_mixin">

<CounterButton0 />

<CounterButton1 />

<CounterButton2 />

</div>

</template>

<script>

import CounterButton0 from '~/components/studymixin/CounterButton0';

import CounterButton1 from '~/components/studymixin/CounterButton1';

import CounterButton2 from '~/components/studymixin/CounterButton2';

export default {

components : {

CounterButton0,

CounterButton1,

CounterButton2

}

}

</script>

<style lang="scss" scoped>

.study_mixin{ text-align: center; padding-top: 10px;

> div{ margin-bottom: 10px; }

}

</style>

- CounterMixin.js

export default{

data(){

return{

count : 0

}

},

methods: {

showCount(){

this.count += 1;

}

}

}

- CounterButton0.vue

<template>

<div>

<button @click='showCount'>{{ count }}</button>

</div>

</template>

<script>

import CounterMixin from "~/components/studymixin/CounterMixin";

export default {

mixins : [

CounterMixin

]

}

</script>

<style lang="scss" scoped>

button{ width: 500px; font-size: 100px; }

</style>

- CounterButton1.vue

<template>

<div>

<button @click='showCount'>{{ count }}</button>

</div>

</template>

<script>

import CounterMixin from "~/components/studymixin/CounterMixin";

export default {

mixins : [

CounterMixin

],

data(){

return{

count : 10

}

},

methods : {

showCount()

{

this.count += 10;

}

}

}

</script>

<style lang="scss" scoped>

button{ width: 500px; font-size: 100px; }

</style>

- CounterButton2.vue

<template>

<div>

<button @click='showCount'>{{ count }}</button>

</div>

</template>

<script>

import CounterMixin from "~/components/studymixin/CounterMixin";

export default {

mixins : [

CounterMixin

]

}

</script>

<style lang="scss" scoped>

button{ width: 500px; font-size: 100px; }

</style>