17.组件递归

组件递归

组件递归主要用于一个组件里面也有类似外层一样的结构，类似手风琴效果。

具体组件的代码如下：

<template>
  <ul class="right-list-container">
    <li v-for="(item, i) in list" :key="i">
      <span @click="handleClick(item)" :class="{ active: item.isSelect }">
        {{ item.name }}
      </span>
      <!-- 显示当前组件 -->
      <RightList :list="item.children" @select="handleClick"></RightList>
    </li>
  </ul>
</template>

<script>
export default {
  name: "RightList",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleClick(item) {
      console.log("点击了",item);
    //   $emit 代表的是跨组件抛出事件。
      this.$emit("select", item);
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.right-list-container {
    list-style: none;
    padding: 0;
    .right-list-container{
        margin-left: 1em;
    }
    li {
        min-height: 40px;
        line-height: 40px;
        cursor: pointer;
        .active {
            color: @warn;
            font-weight: bold;
        }
    }
}

</style>

1. 组件递归只需要给当前组件name: "RightList"一个name 属性，就可以在当前组件内部像使用其他组件一样的规则去使用。 什么叫像其他组件一样的规则去使用？比方说外边给内部组件怎么传递数据。
2. 如果点击上面的c-2-1,事件是怎么传递和抛出的？
   事件应该是按照 <span @click="handleClick(item)" 最里层的li触发事件，然后执行 this.$emit("select",item); 抛出事件，注意$emit是跨组件抛出事件的，所以这里会把事件抛到中间层的RightList事件里面，然后中间层的RightList 通过 @select="handleClick 接收到内层的事件，然后再次调用this.$emit("select", item); ，中间一层这个组件再往外层抛出事件，然后抛给最外层的当前组件，然后重复前面的过程，最后把事件抛给了外面，是这么一个过程。
3. 这里看 @select="handleClick"为啥不加括号和参数，因为是向外抛出事件，可以不写括号，不传递参数，调用那里仍然会收到参数。
4. 这里需要注意区分一点就是 @select 这里是抛出事件和 @click 不一样的，前面是自定义事件的写法，而后面是dom的点击事件，@select可以随便命名，但是点击事件就是@click.这里需要注意区分。
5. 这里在props 里的list默认值是一个数组，当默认值是数组或者对象的时候，默认值要用箭头函数的返回，内部的原因不太清楚。
6. li 的样式里面有一个min-height: 40px;不写height：40px是因为里面的有的有层叠结构，高度可能不止40px，按照min-height: 40px;相当于设置了一行的最小高度。
7. 事件的抛出是跨组件的传递的