没有废话的vue高级进阶( 三 ) 组件高级用法及最佳实践

世界上有太多孤独的人害怕先踏出第一步。      ---绿皮书

书接上回，上篇介绍了vue组件通信比较有代表性的几种方法，本篇主要讲述一下组件的高级用法和最佳实践，争取用最少的篇幅占领高地！（多说一句，后续这个系列会有vue最佳实践和源码解读，我总有办法能让大家看懂，所以点赞关注，不迷路啊，小老弟

本篇主要内容

• 递归组件
• 动态组件
• 异步组件
• 内联模板 inline-template的使用
• 全局组件批量自动注册
• Vue 的构造器——extend
• vue 修饰符sync深入解析

正文开始

递归组件

函数的递归是自己调用自己，这个过程有两个必要条件：

• 这个函数必须有函数名称
• 这个递归函数必须有结束条件,不然就会报Maximum call stack size exceeded,内存溢出

本质上讲，组件也是一个函数，递归组件自然也是自己调用自己，所以也要满足两个条件：

• 这个组件必须有确定的name,也就是要给组件设置name
• 必须要有一个结束条件，告诉组件什么时候递归结束

上代码

非常简单的功能，让你看懂递归，A.vue中引入B.vue,B组件是递归的核心所在

<template>
  // 要将treeData通过prop进行传递
  <B :propTreeData="treeData"/>
</template>
<script>
import B from './B'
export default {
  name: "Tree",
  data() {
    return {
      treeData: [
        {
          id: "1",
          menuName: "笑傲江湖",
          menuCode: "1",
          children: [
            {
              menuName: "令狐冲",
              menuCode: "10"
            },
            {
              menuName: "东方不败",
              menuCode: "11"
            }
          ]
        },
        {
          id: "2",
          menuName: "射雕英雄",
          menuCode: "2",
          children: [
            {
              menuName: "蓉儿",
              menuCode: "20"
            },
            {
              menuName: "郭靖",
              menuCode: "21"
            }
          ]
        }
      ]
    };
  },
  components:{B}
};
</script>

复制代码

B组件，递归的核心&