TS组件中使用v-model属性

背景

前置条件

  1.ts语言
  2.antdv（Ant Design Vue）

正文

本质：父子组件之间相互传值。

父组件

<template>
    <div>
        <test-comp :options="selectData.options"
                   v-model="selectData.checked"
                   @changefun="changefun"></test-comp>
        <button @click="changeSelectValue">改变select值</button>
    </div>
</template>

<script lang="ts">
    import abpbase from '@/lib/abpbase';
    import { Component } from 'vue-property-decorator';
    import TestComp from '@/views/sample/test/test-comp.vue';

    @Component({
        name: 'test',
        components: { TestComp },
    })
    export default class Test extends abpbase {
        selectData = {
            checked: 2, // 选定值(默认选B)
            options: [ // 选择项
                { key: 1, value: 'A' },
                { key: 2, value: 'B' },
                { key: 3, value: 'C' },
                { key: 4, value: 'D' },
            ],
        }

        // 子组件修改选定值
        changefun(key) {
            this.selectData.checked = key;
        }

        // 父组件修改选定值
        changeSelectValue() {
            this.selectData.checked = 3; // 选c
        }
    }
</script>

<style lang="less" scoped>

</style>

子组件

<template>
    <div>
        <a-select style=" 200px;" @change="mychange($event)" :value="value">
            <a-select-option v-for="(item, index) in options" :key="item.key">
                {{ item.value }}
            </a-select-option>
        </a-select>
    </div>
</template>

<script lang="ts">
    import abpbase from '@/lib/abpbase';
    import {
        Component, Emit, Model, Prop,
    } from 'vue-property-decorator';

    @Component({
        name: 'TestComp',
        components: {},
    })
    export default class TestComp extends abpbase {
        // 选项
        @Prop({ default: () => ([]), type: Array }) options: object

        /**
         * 事件：操作事件，一般用于调用父组件方法并传参。
         * 值：用于接收父组件传过来的值
         */
        @Model('change', { type: Number, default: 0 }) value: number;
        // 等同于
        // @Prop({ type: Number, default: 0 }) value: number;

        /**
         * 调用父组件方法，并传值
         * @param key
         */
        @Emit('changefun')
        mychange(key) {
            return key;
        }
    }
</script>

<style scoped>

</style>

结语