书接上回，上篇介绍了vue组件通信比较有代表性的几种方法，本篇主要讲述一下组件的高级用法和最佳实践，争取用最少的篇幅占领高地！（多说一句，后续这个系列会有vue最佳实践和源码解读，我总有办法能让大家看懂，所以点赞关注，不迷路啊，小老弟
- 递归组件
- 动态组件
- 异步组件
- 内联模板 inline-template的使用
- 全局组件批量自动注册
- Vue 的构造器——extend
- vue 修饰符sync深入解析
递归组件
函数的递归是自己调用自己，这个过程有两个必要条件：
- 这个函数必须有函数名称
- 这个递归函数必须有结束条件,不然就会报
Maximum call stack size exceeded,内存溢出
本质上讲，组件也是一个函数，递归组件自然也是自己调用自己，所以也要满足两个条件：
- 这个组件必须有确定的name,也就是要给组件设置name
- 必须要有一个结束条件，告诉组件什么时候递归结束
非常简单的功能，让你看懂递归，A.vue中引入B.vue,B组件是递归的核心所在
// 要将treeData通过prop进行传递
"treeData"/>
template>
复制代码看下实现效果，这是一个最最简单的递归，但是后续的所有的复杂功能，折叠，选中，拖拽哪一个又不是基于这个来进行的呢？复杂功能大家可以继续扩展，都不难
动态组件
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。
通过使用保留的
元素，动态地绑定到它的is特性，可以实现动态组件
"example">
"currentView">
复制代码动态组件的缓存，会将不活动的组件实例缓存起来，而不是销毁它们，比如切换tab后，还能保持切换之前的状态，如果有多个条件性的子元素，
要求同时只有一个子元素被渲染
-----------------------------------------------
` 要求同时只有一个子元素被渲染
复制代码 使用的时候，比如keep-alive下有A,B,C三个组件，但是我只想缓存A和B,这时候该怎么办，就要用到**【
include和exclude】来进行筛选过滤，根据你的过滤 条件确定缓存哪个组件**
include会匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配
"a,b">
"view">
"/a|b/">
"view">
"['a', 'b']">
"view">
复制代码异步组件
异步组件说白了就是按需加载，使用时才装入需要的组件，可以有效的提高首次装入页面的速度。比如在路由切换时。
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], resolve)
}
复制代码利用此特性，我们便能做很多针对前端的优化。 比如：将页面核心功能（音、视频播放、文章、商品等等）打包成一个核心模块，通过框架优先加载。 其他的一些周边功能打包后，通过服务器异步加载，从而解决业务需求越来越多导致的系统难维护、访问慢问题。
既然是异步加载，就会存在加载过程（正在加载中）、以及加载失败等异常情况,看下图一目了然。。。
内联模板 inline-template的使用
Vue提供了一种内联模板的功能，在使用组件时，给标签加上inline-complate特性，组件就会把它的内容当作模板，而不是当内容分发。其实也就是说，不在创建一个组件时定义它的模板，而是在声明的外部创建。
父组件
在父组件中定义子组件的模板
{{msg}}
子组件
export default{
name:'ChildComponent',
data(){
return{
msg:'张不怂'
}
}
}
最终显示
在父组件中定义子组件的模板
张不怂
复制代码inline-template使得各个组件的结构混乱，建议不要轻易使用内联模板
全局组件批量自动注册
我们vue组件中引入组件的一般方式是这样的
<A v-model="searchText" @keydown.enter="search"/>
<B @click="search">
<C name="search"/>
B>
template>
<script>
import B from './B'
import C from './C'
import A from './A'
export default {
components: { B, C, A }
}
script>
复制代码有没有办法可以自动全局进行注册呢？答案是肯定的,在你要引入的包含所有组件的文件夹components的同级目录下建register.js,写入下边的代码
const requireComponent = require.context(
'./components', // 其组件目录的相对路径
false, // 是否查询其子目录
/base_[A-Z]\w+\.(vue|js)$/ // 匹配基础组件文件名的正则表达式
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 剥去文件名开头的 `./` 和结尾的扩展名
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// 全局注册组件
Vue.component(
componentName,
componentConfig.default || componentConfig
)
})
复制代码然后在你的vue项目的main.js中进行引入,就直接可以使用
import @/register.js;
复制代码Vue 的构造器——extend
Vue.extend(options)
用法：使用Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数
描述：Vue.extend返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue的实例构造器
自定义一个无参数标签
var foo = Vue.extend({
template: "",
data : function() {
return {
foo : 'vamous',
url : 'https://juejin.im/editor/drafts/5cd2da7a5188253e8c23baf6'
}
}
});
对应的html
foo>
此时的页面必然是没有任何效果的，因为扩展实例构造器还需要挂载，如下：
new foo().$mount('#app');
复制代码 可以利用propsData传递参数
var author = Vue.extend({
template: "",
data : function() {
return {
bar : 'vamous',
url : 'https://juejin.im/editor/drafts/5cd2da7a5188253e8c23baf6'
}
},
props : ['name']
});
new author({propsData: {name : 'foo'}}).$mount('#author');
复制代码vue 修饰符sync深入解析
实现子组件与父组件双向绑定的【sync】修饰符：其实sync这个修饰符是vue1.0就有的，它可以实现父子组件的双向绑定，但是Vue2.0被移除了，直到2.3.0版本发布后，又重新开始启用，【.sync】可以很轻松的实现子组件同步修改父组件的值
如果子组件想修改父组件的值，推荐以update:my-prop-name 的模式触发事件取而代之，也就是这样：
父组件
"doc.title"
v-on:update:title="doc.title = $event"
>
---------------------------------------------------------------
子组件
this.$emit("update:title".newTitle)
复制代码而上边的 v-on:update:title="doc.title = $event"，本质上就可以用sync这个语法糖来表示，.sync后面紧接的就是父组件中需要被改变的值，看下边的例子体会一下
父组件
"text" >
==================================================================================
//子组件中修改父组件的值
"post">
复制代码本篇基本就是这些，这三篇概述了vue的一些知识点，更多的vue实践还需要在工作中自己总结和挖掘，道阻且长,行则将至~
觉得对你有帮助，不妨点个
赞
，后续持续输出这种简短有效的文章，帮助你用最短的时间内掌握最多的内容，毕竟谁不喜欢一劳永逸不是？ ❥(^_-) thank you ~
后续目录
没有废话的vue高级进阶( 一 ) 组件精髓概述
没有废话的vue高级进阶( 二 ) 8种组件通信详解
没有废话的vue高级进阶( 三 ) 组件高级用法及最佳实践