【Vue3】组件递归

【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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 子组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42