[VUE + TYPESCRIPT] @Model

VUE.JS 목록

$ touch src/components/Checkbox.vue

Checkbox.vue를 만들고 아래와 같이 코딩합니다.

<template>
    <input type="checkbox" :checked="checked" @change="change">
</template>

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

@Component
export default class MyCheckbox extends Vue {
    @Model('change', {type: Boolean}) readonly checked!: boolean;

    @Emit()
    change(event: Event) {
        return event.target.checked;
    }
}

</script>

 

src/component/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <my-checkbox v-model="checked" @change="change"></my-checkbox>
    {{ text }}
  </div>
</template>

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

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

export default class Home extends Vue {
    checked: boolean = false;
    text: string = '선택함';

    change(checked: boolean) {
        this.checked = checked;
        this.text = checked ? '선택함' : '선택하지 않음';
    }
}
</script>

 

 

VUE.JS 목록