在递归组件中$emit不会向父组件传递消息

[XueNing-RJ]

父组件：
`

<template #expand-icon="{ active }">

<template #header>
<div @click.stop="() => handleHeaderClick(item)" style="display: flex; align-items: center;">
<a-checkbox
v-model:model-value="item.select"
v-model:indeterminate="item.indeterminate"
@change="handleChangeAll(item)"
style="margin-top: 2px; min-width: 140px;"
class="dz-checkbox-permission"
>
{{ item.name }}


<template #prefix>
权重:




<DzPermissionCollapse
:data="item.children"
@handlePageChange="handlePageChange"
@handlePermissionsChange="handlePermissionsChange"
/>

<script setup lang="ts"> import { ref } from "vue"; import type { RouterType, PermissionsType } from "@/types/global"; import DzPermissionCollapse from "./components/dz-permission-collapse.vue"; // 工作区 import transaction from "./info/transaction.ts"; // 细分市场管理 import segmentationManage from "./info/segmentation-manage.ts"; // 产品管理 import productManagement from "./info/product-management.ts"; // 客户管理 import customerManagement from "./info/customer-management.ts"; // 销售管理 import salesManagement from "./info/sales-management.ts"; // 增值服务管理 import valueAddedServiceManagement from "./info/value-added-service-management.ts"; // 公共管理 import publicManagement from "./info/public-management.ts"; // 报表 import reportForms from "./info/report-forms.ts"; // 基础数据 import basicData from "./info/basic-data.ts"; // 个人中心 import personalCenter from "./info/personal-center.ts"; // 设置 import setUp from "./info/set-up.ts"; const treeData = ref([ transaction, segmentationManage, productManagement, customerManagement, salesManagement, valueAddedServiceManagement, publicManagement, reportForms, basicData, personalCenter, setUp ]); const handleHeaderClick = (item: RouterType) => { // 处理点击事件，防止阻止 checkbox 和 input 的默认行为 }; const handleChangeAll = (item: RouterType) => { console.log("顶级的 页面选择 信息") console.log(item); item.indeterminate = false; // 递归处理子项 if (item.children && item.children.length > 0) { for (let i = 0; i < item.children.length; i++) { var element = item.children[i]; element.select = item.select; handleChangeAll(element); // 递归调用 } } } const handlePageChange = (item: RouterType) => { console.log("ddd") // if (!bRecursion) { // console.log("最终父组件接受到的 页面选择 信息") // console.log(item); // } // 递归处理子项 if (item.children && item.children.length > 0) { for (let i = 0; i < item.children.length; i++) { var element = item.children[i]; element.select = item.select; handlePageChange(element); // 递归调用 } } } const handlePermissionsChange = (item: PermissionsType) => { console.log("最终父组件接受到的 权限选择 信息") console.log(item); } </script> <style scoped lang="less"> .dz-checkbox-permission { :deep(.arco-checkbox-label) { color: rgb(var(--arcoblue-6)); } } </style>

`

子组件：
`



<template #header>
<div @click.stop="() => {}" style="display: flex; align-items: center;">
<a-checkbox
@change="handlePageChange(item)"
style="margin-top: 2px; min-width: 140px;"
:value="item.key"
v-model:model-value="item.select"
v-model:indeterminate="item.indeterminate"
>
{{ item.name }}


<template #prefix>
权重:

按钮权限：

<a-checkbox
style="margin-right: 20px;"
v-for="(itemp, indexp) in item.permissions"
:key="itemp.key"
:value="itemp.key"
v-model:model-value="itemp.select"
:disabled="!item.select"
@change="handlePermissionsChange(itemp)"
>
{{ itemp.name }}

<DzPermissionCollapse
:data="item.children"
@handleChange="handlePageChange"
@handlePermissionsChange="handlePermissionsChange"
>

<script lang="ts"> import type { RouterType, PermissionsType } from "@/types/global"; export default { name: "DzPermissionCollapse", }; </script> <script setup lang="ts"> import { defineEmits } from "vue"; const props = defineProps({ data: { type: Array as () => RouterType[], default() { return [] }, }, }); const $emit = defineEmits(['handlePageChange', "handlePermissionsChange"]); const handlePageChange = (item: RouterType) => { console.log("Page Change", item); $emit('handlePageChange', item); }; const handlePermissionsChange = (item: PermissionsType) => { console.log("Permissions Change"); $emit('handlePermissionsChange', item); }; </script> <style scoped> </style>

`