vue3循环引用自已实现

<template>   <div class="tree-node">     <div class="node-content">       {{ node.label }}       <button @click="addChild">添加子节点</button>     </div>     <div class="children" v-if="node.children && node.children.length > 0">       <TreeComponent         v-for="(child, index) in node.children"         :key="index"         :node="child"         @add-child="handleAddChild(index)"       />     </div>   </div> </template>

<script setup> import { ref } from 'vue'

const props = defineProps({   node: {     type: Object,     required: true   } })

const emit = defineEmits(['add-child'])

const addChild = () => {   emit('add-child', null) }

const handleAddChild = (index) => {   emit('add-child', index) } </script>

<style scoped> .tree-node {   padding-left: 20px;   border-left: 1px dashed #ccc;   margin: 8px 0; } .node-content {   display: flex;   align-items: center;   gap: 8px;   background: #f9f9f9;   padding: 4px 8px;   border-radius: 4px; } .children {   margin-top: 8px; } </style>