vue2+ts中modal的使用

<template>
    <div class="list"
         @click="changeModel">组件内的modelA(可点击): {{ modelA }}</div>
</template>

<script lang="ts">
    import { Vue, Component, Model } from 'vue-property-decorator';
    @Component
    export default class ModelComponent extends Vue {
        // 原写法
        // model: {
        //     prop: 'modelA',
        //     event: 'change'
        // },
        // props: {
        //     modelA: {
        //         type: Boolean
        //     }
        // }

        // v-model通常给原生标签使用，主要用于同步父子组件的数据
        // 此处是给单文件组件设置v-model
        // 设置一个readonly属性modelA，加一个Model装饰器，派发change事件时修改页面的值，type为Boolean
        @Model('change', { type: Boolean }) readonly modelA!: boolean;

        changeModel() {
            this.$emit('change', !this.modelA);
        }
    }
</script