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

• antDesignVue三种传值方法

1，第一种：事件传值

（1）src\views\gj\bid\pricelist\components\ProjectSelect.vue

定义事件：可以在子组件中发出事件，让父级组件接收数据，处理业务。

const emit = defineEmits(['select']);

/**

   * 设置当前选中的行，

   */

  function setSelectedKey(key: string, data?: object) {

    selectedKeys.value = [key];

    if (data) {

      emit('select', data);  //发出事件和数据

    }

  }

（2）接收事件数据，

src\views\gj\bid\pricelist\index.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)子框中处理数据

src\views\gj\bid\pricelist\components\DepartTree.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');//接受数据

如：src\views\gj\project\GjProjectInfoList.vue中

const mainId = computed(() => (unref(selectedRowKeys).length > 0 ? unref(selectedRowKeys)[0] : ''));

//父级组件下发 mainId,让子组件接收

provide('mainId', mainId);

在子文件中接收数据

src\views\gj\project\GjProjectUploadbillList.vue

    //接收主表id

    const mainId = inject('mainId') || '';