【Vue3】组件递归

• 实现效果

通过传入一个数字，实现数字次循环

• 父组件

<script setup>
import { ref } from "vue";
import RecursionMe from "./components/RecursionMe/index.vue";

const level = ref(0);

const add = () => level.value++;
</script>

<template>
  <div>
    <RecursionMe :level="level" @add="add" />
  </div>
</template>

• 子组件

<script>
export default {
  name: "RecursionMe", //给组件命名
};
</script>

<script setup>
import { defineEmits } from "vue";
const props = defineProps({
  level: Number,
});

const emit = defineEmits(["add"]);

const add = () => emit("add");
</script>

<template>
  <div>
    <div v-if="level === 0" class="over">
      <button @click="add">添加一层</button>
    </div>
    <div v-else class="box">
      <recursion-me :level="level - 1" @add="add" />
    </div>
  </div>
</template>

<style scoped>
.over {
  width: 200px;
  height: 160px;
  background-color: aquamarine;
}
.box {
  display: inline-block;
  padding-right: 10px;
  padding-bottom: 10px;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}
</style>