Vue学习记录：自定义组件内部引用当前组件

只用来记录自己在学习vue过程中遇到的问题，如有误麻烦帮忙指正，Thanks♪(･ω･)ﾉ

以Vue2为例（如果使用的是Vue3组合式api，就是把相应的写法改为组合式的）

需要注意的点：

1. 如果是Vue2，一定要有name，不然会找不到组件
2. 自定义组件一定要有判断条件，也就是像递归一样，必须要有结束语句，不然会造成死循环

简单示例：

// 自定义组件TestCom.vue
<template>
  <div>
    <!-- 要有判断条件 -->
    <div v-if="isNest">
      <span>这是一个测试组件</span>
    </div>
    <div v-else>
      <span>父组件设置为false之后走的else分支</span>
      <test-com :is-nest="true"></test-com>
    </div>
  </div>
</template>
<script>
export default {
  // Vue2一定要有name
  name: 'TestCom',
  props: {
    isNest: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<!-- 如果是Vue3，可以不添加name，但是如果想要添加name的话可以采用如下写法： -->
<!-- 方法1： -->
<script>
export default {
  name: 'TestCom'
}
</script>
<script setup>
// ...其他的内容再写到语法糖里
</script>
<!-- 方法2：参考官网：
https://cn.vuejs.org/api/sfc-script-setup.html#defineoptions Vue 3.3+提供了一个宏（defineOptions()
），可以用来直接在 <script setup> 中声明组件选项，而不必使用单独的 <script> 块-->
<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>

// 父组件，正常使用即可
<template>
  <div>
    <span>上级指标类填报</span>
    <test-com :is-nest="false"></test-com>
  </div>
</template>
<script>
import TestCom from './TestCom.vue'
export default {
  // Vue3不需要在进行组件注册，引入后可以直接使用
  components: {
    TestCom
  }
}
</script>

在Vue2创建的项目中使用的时候，组件一定要写name，如果没有添加name，我在使用过程中自定义的组件不会在页面中展示，且控制台会报错，报错如下：

但是在Vue3创建的项目中去使用的时候，无论是选项式API还是组合式API 不写name是可以正常运行的。

自定义组件中引用当前组件，是我在写多层嵌套的菜单的时候用到的。