前置条件
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 = {
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 @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>
结语
