十一、 ant-Design-Vue三种传值方法

  • 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') || '';