背景
前置条件
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>
结语