[VUE + TYPESCRIPT] Mixins 다중상속

VUE.JS 목록

$ touch src/components/MyMixins.vue

MyMixins.vue를 생성하고 아래와 같이 코딩합니다.

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';

@Component
export default class MyMixins extends Vue {
    public show: boolean = false;
    public myShow() {
        this.show = !this.show;
    }
}
</script>

 

$ touch src/components/Screen1.vue

Screen1.vue을 생성하고 아래와 같이 코딩합니다.

<template>
    <div>
        <button @click="myShow">버튼</button>
        <p v-if="show">안녕</p>
    </div>
</template>

<script lang="ts">
import {Vue, Component, Mixins} from 'vue-property-decorator';
import MyMixins from '@/components/MyMixins.vue';

@Component({
    components: {
        MyMixins,
    }
})

export default class Screen1 extends Mixins(MyMixins) {
    mounted() {
        console.log(this);
    }
}
</script>

 

src/component/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <screen1 v-model="checked" @change="change"></screen1>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Provide } from 'vue-property-decorator';
import Screen1 from '@/components/Screen1.vue';

@Component({
    components: {
        Screen1,
    },
})

export default class Home extends Vue {}
</script>

console창에 myShow 함수와 show 변수를 확인 할 수 있습니다.

 

 

버튼도 잘 작동합니다.

 

 

$ touch src/components/Screen2.vue

Screen2.vue도 생성하고 아래와 같이 코딩합니다.

 

<template>
    <div>
        <button @click="myShow">버튼2</button>
        <p v-if="show">안녕2</p>
    </div>
</template>

<script lang="ts">
import {Vue, Component, Mixins} from 'vue-property-decorator';
import MyMixins from '@/components/MyMixins.vue';

@Component({
    components: {
        MyMixins,
    }
})

export default class Screen2 extends Mixins(MyMixins) {
    mounted() {
        console.log(this);
    }
}
</script>

 

/src/component/Home.vue를 아래와 같이 수정합니다.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <screen1 v-model="checked" @change="change"></screen1>
    <screen2 v-model="checked" @change="change"></screen2>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Provide } from 'vue-property-decorator';
import Screen1 from '@/components/Screen1.vue';
import Screen2 from '@/components/Screen2.vue';

@Component({
    components: {
        Screen1,
        Screen2,
    },
})

export default class Home extends Vue {}
</script>

 

 

 

VUE.JS 목록