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="width: 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>

結語