- antDesignVue三种传值方法
1,第一种:事件传值
(1)srcviewsgjidpricelistcomponentsProjectSelect.vue
定义事件:可以在子组件中发出事件,让父级组件接收数据,处理业务。
const emit = defineEmits(['select']);
/**
* 设置当前选中的行,
*/
function setSelectedKey(key: string, data?: object) {
selectedKeys.value = [key];
if (data) {
emit('select', data); //发出事件和数据
}
}
(2)接收事件数据,
srcviewsgjidpricelistindex.vue
<a-card :bordered="false" style="height: auto">
<ProjectSelect @select="onProjectTreeSelect" />
</a-card>
(3)//处理函数,选中的项目
let projectData = ref({});
function onProjectTreeSelect(data) {
console.log('--------------------data-'+JSON.stringify(data));
console.log('--------------------data key-'+data.key);
console.log('--------------------data leaf-'+data.isLeaf);
projectData.value = data; //接收数据data,触发projectData刷新tab子界面
if(data.isLeaf===true){
activeKey.value= "user-info"; //是叶子节点,触发改变激活所选择tab为当前"user-info"
}else{
activeKey.value= "base-info"; //不是叶子节点,触发改变激活所选择tab为当前base-info
}
}
(4)projectData触发子框内数据接收
<a-card :bordered="false" style="height: auto">
<DepartTree @select="onTreeSelect" :data="projectData"/>
</a-card>
(5)子框中处理数据
srcviewsgjidpricelistcomponentsDepartTree.vue
//定义数据属性
const props = defineProps({
data: { require: true, type: Object },
});
// 当前选中的部门ID,可能会为空,代表未选择部门
const projectId = computed(() => props.data?.id);
//监听数据变化
watch(
() => props.data,
() => onSearch(unref(projectId)) //传入数据,触发查询
);
2,第二种:数据属性传值
请参考上一篇博文,《vue页面上传文件与页面参数传递过程解析》
3,第三种:向下子组件传值
const { prefixCls } = useDesign('depart-user');
provide('prefixCls', prefixCls);//发送数据
const prefixCls = inject('prefixCls');//接受数据
如:srcviewsgjprojectGjProjectInfoList.vue中
const mainId = computed(() => (unref(selectedRowKeys).length > 0 ? unref(selectedRowKeys)[0] : ''));
//父级组件下发 mainId,让子组件接收
provide('mainId', mainId);
在子文件中接收数据
srcviewsgjprojectGjProjectUploadbillList.vue
//接收主表id
const mainId = inject('mainId') || '';