<template>
<div ref="root" class="homse">
<!-- {{ refTreeData }} -->
<recursiveCom :tree-data="refTreeData"></recursiveCom>
</div>
</template>
<script setup lang="ts">
import type { nodeType } from './type'
import { ref, reactive } from 'vue'
// 测试 tree 型组件
import recursiveCom from './recursiveCom.vue'
let treeDataTest = [
{
title: '节点名称',
id: '1',
status: '未开始',
start_time: '2023.08.10',
end_time: '2023.08.16',
falg: true,
show: true,
children: [
{
title: '子节点名称',
id: '1 - 1',
status: '进行中',
start_time: '2023.08.10',
end_time: '2023.08.16',
show: true,
children: [
{
title: '子节点名称',
id: '1 - 1 - 1',
status: '进行中',
start_time: '2023.08.10',
end_time: '2023.08.16'
},
{
title: '二子节点名称',
id: '1 - 2 - 2',
status: '已完成',
start_time: '2023.08.10',
end_time: '2023.08.16'
}
]
},
{
title: '二子节点名称',
id: '1 - 2',
status: '已完成',
start_time: '2023.08.10',
end_time: '2023.08.16'
}
]
},
{
title: '节点名称',
id: '2',
status: '未开始',
start_time: '2023.08.10',
end_time: '2023.08.16',
falg: true,
show: true,
children: [
{
title: '子节点名称',
id: '2 - 1',
status: '进行中',
start_time: '2023.08.10',
end_time: '2023.08.16'
},
{
title: '二子节点名称',
id: '2 - 2',
status: '已完成',
start_time: '2023.08.10',
end_time: '2023.08.16'
}
]
}
]
let refTreeData = ref<nodeType[]>(treeDataTest)
</script>
<style scoped></style>
子组件
<template>
<div style="border: 1px solid #ccc; margin: 10px">
<div v-for="node in treeData" :key="node.id">
<span
v-if="node.children"
class="icon"
:class="node.show ? 'packup' : 'openup'"
@click="expansion(node)"
>🔺</span
>
<div class="continer">{{ node.id }}{{ node.title }} {{ node.status }}</div>
{{ node.show }}
<template v-if="node.show">
<recursive-node v-if="node.children" :tree-data="node.children" />
</template>
</div>
</div>
</template>
<script setup lang="ts">
import type { nodeType } from './type'
import recursiveNode from './recursiveCom.vue'
defineProps<{
treeData: nodeType[]
}>()
let expansion = (node: nodeType) => {
node.show = !node.show
}
</script>
<style scoped lang="less">
.packup {
transform: rotate(180deg);
}
.openup {
transform: rotate(90deg);
}
.icon {
display: inline-block;
cursor: pointer;
}
.continer {
display: inline-block;
}
</style>
在expansion函数中可以直接修改父组件的值,vue也不会报警告,这是被允许的吗?为什么可以正常修改