文中已经参与「」
文中是独立组件开发的第五篇文章内容。
第一篇文章内容：Vue单独组件开发: prop event slot。
第二篇文章内容：Vue单独组件开发：不一样的部件通讯方式
第三篇文章内容： Vue单独组件开发：动态组件 Vue.extend及$mount
第四篇文章内容： Vue单独组件开发：换一种构思写Vue——Render 函数公式与 Functional Render
动态组件
在设计中，你经常遇到那么一种情况：依据标准动态性地转换某一部件，或动态性地使用3D渲染某一部件。
在换一种构思写Vue：Render 函数公式与 Functional Render文中大家阐述了函数式部件 Functional Render，它是一个并没有前后文的函数公式，主要用于程序化交易的在好几个部件中选择一个。应用 Render 或 Functional Render 能解决动态性转换元件的要求，但是那就是根据一个 JS 目标（Render 函数公式），而 Vue 带来了另外一个内置部件<component>和is特点，可以更好的完成动态组件。
最先一起来看看<component>和is的最基本应用，最先界定三个一般部件A,B,C：
<template>
<div>
部件 A
</div>
</template>
<script>
export default {
}
</script>
<template>
<div>
部件 B
</div>
</template>
<script>
export default {
}
</script>
<template>
<div>
部件 C
</div>
</template>
<script>
export default {
}
</script>
之后在父部件中导进这 3 个部件，并动态性转换：
<template>
<div>
<button @click="handleChange('A')">表明 A 部件</button>
<button @click="handleChange('B')">表明 B 部件</button>
<button @click="handleChange('C')">表明 C 部件</button>
<component :is="component"></component>
</div>
</template>
<script>
import componentA from '../components/a.vue';
import componentB from '../components/b.vue';
import componentC from '../components/c.vue';
export default {
data () {
return {
component: componentA
}
},
methods: {
handleChange (component) {
if (component === 'A') {
this.component = componentA;
} else if (component === 'B') {
this.component = componentB;
} else if (component === 'C') {
this.component = componentC;
}
}
}
}
</script>
这儿的is动态绑定的是一个部件目标（Object），它立即偏向 a / b / c 三个部件中的一个。除开立即关联一个 Object，也可以是一个 String，例如标签名、部件名。
下边的这一部件，将原生的按键 button 展开了封装形式，假如传到了prop: to，那他会3D渲染为一个网页链接<a>标识，用以开启这一，要是没有传到to，就当作一般 button 应用。
<template>
<component :is="tagName" v-bind="tagProps">
<slot></slot>
</component>
</template>
<script>
export default {
props: {
// 网页链接
to: {
type: String,
default: ''
},
// 连接打开，如 _blank
target: {
type: String,
default: '_self'
}
},
computed: {
// 动态性3D渲染不一样标签
tagName() {
return this.to === '' ? 'button' : 'a'
},
// 假如是连接，将这些特性都关联在 component 上
tagProps() {
let props = {}
if (this.to) {
props = {
target: this.target,
href: this.to
}
}
return props
}
}
}
</script>
应用部件：
<template>
<div>
<i-button>一般按键</i-button>
<br />
<i-button to="https://">连接按键</i-button>
<br />
<i-button to="https://" target="_blank"
>新页面打开网址按键</i-button
>
</div>
</template>
<script>
import iButton from '../components/isCom/button.vue'
export default {
components: { iButton }
}
</script>
最终都会3D渲染出一个原生的<button>按键或两个原生的连接<a>，且第二个点一下会到新页面中打开网址，如下图：
i-button 部件里的<component>is关联的就是一个标签名称 button / a，同时通过v-bind将一些附加的特性所有关联到<component>上。
再回第一个 a / b / c 部件转换的实例，假如这一类的部件，经常转换，实际上部件会从新3D渲染的。
目前在部件 A 中放2个生命期 mounted, beforeDestroy。只需转换到 A 部件，mounted便会开启一次，转换到其他部件，beforeDestroy还会开启一次，表明部件然后重新3D渲染，那样有可能造成兼容性问题。
为了防止元件的反复3D渲染，还可以在<component>表层套一个 Vue.js 内置<keep-alive>部件，那样部件便会被缓存文件下去：
<keep-alive>
<component :is="component"></component>
</keep-alive>
这时候，仅有mounted触动了，假如不离去当前页，转换到其他部件，beforeDestroy不被开启，表明部件早已被缓存文件了。
递归算法部件
递归算法部件是指部件在模版中启用自身，打开递归算法元件的必备条件，便是在部件中设置一个name选择项。
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
export default {
name: 'my-component'
}
</script>
在 Webpack 中导进一个 Vue 部件，一般是根据import myComponent from 'xxx'这种词法，随后在目前部件（网页页面）的components: { myComponent }里申请注册部件，这类部件并不是强制性设定name字段名的，元件的名称全是使用人在 import 进去后自定的。
但递归算法元件的使用人是部件本身，它得了解这个部件叫什么名字，由于没用components申请注册，因此name字段名便是必不可少的了。
除开递归算法部件用name，有一些特殊的方式，比如用赋值配对元件的 name 选择项来获取部件案例，也有keep-alive部件还会应用元件的name特性。
但是，应用上边的部件是错误的，要是直接运作，会抛出去max stack size exceeded错误，由于部件会无尽递归算法下来，无限循环。
要解决这些问题，就需要给递归算法部件一个约束条件，一般会在递归算法部件上使用v-if在一个地方设为false来结束。就像我们给上边的实例加一个特性 count，当超过 5 时也就不再递归算法：
<template>
<div>
<p>recursion</p>
<my-component :count="count 1" v-if="count <= 5"></my-component>
</div>
</template>
<script>
export default {
name: 'my-component',
props: {
count: {
type: Number,
default: 1
}
}
}
</script>
因此，实现一个递归算法元件的必备条件是：
- 要为部件设定name；
- 要有一个很明确的完毕标准；
汇总
动态组件广泛用于灵便3D渲染元件的情景，依据某些标准来3D渲染不同类型的部件，组合<keep-alive>能够避免部件频繁地建立与消毁。
递归算法元件的应用必须特别关心完毕标准，不然会一直递归算法下来造成程序流程出错。
这也是本系列详细介绍 Vue 单独组件开发基础知识最终一篇文章，后边我们将利用这个基本知识建立类似elementui，ant design组件库中的一些常见部件，来增强对Vue研发的了解。