1，递归组件
<!--
递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。
设置那么House在组件模板内就可以递归使用了,不过需要注意的是，
必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
组件递归用来开发一些具体有未知层级关系的独立组件。比如：
联级选择器和树形控件
-->
父组件
<recursion:count="1"></recursion>
//
recursion.vue
< recursion :count=" count+ 1" v-if=" count< 3" ></ recursion >
< recursion :count=" count+ 1" v-if=" count< 3" ></ recursion >
2，内联模板
<!--
组件把它的内容当成模板
父组件作用域下的数据和子组件声明的数组都可以被渲染(如果同名,优先使用子组件数据)
注释： 如果不是特殊场景 不建议使用内联组件
-->
<
dynamic
inline-template
>
<
div
>
<
h3
>在父组件中定义子组件的模板
</
h3
>
<
p
>{{
msg}}
</
p
> // 子组件中的数据
<
p
>{{
message}}
</
p
>
</
div
>
</
dynamic
>
3，动态组件
<!--
组件把它的内容当成模板
父组件作用域下的数据和子组件声明的数组都可以被渲染(如果同名,优先使用子组件数据)
注释： 如果不是特殊场景 不建议使用内联组件
-->
<
button
@click="
changeComponent(
'A')"
>Recursion
</
button
>
<
button
@click="
changeComponent(
'B')"
>Dynamic
</
button
>
<
button
@click="
changeComponent(
'C')"
>CurrentComponent
</
button
>
<
component
:is="
comp"
></
component
>
<!-- 如果切换出去的组件保存在内存中可以使用 <keep-alive> -->
// .js
methods: {
changeComponent(
val) {
const
currentComponentObj = {
A:
"Recursion",
B:
"Dynamic",
C:
"CurrentComponent"
};
this.
comp =
currentComponentObj[
val];
}
}
4，异步组件
<!--
工程足够大，使用组件足够多的时候，要考虑一下性能的问题了。
没有必要把所有的组件都加载进来
Vue允许将组件定义为一个工厂函数，动态的解析组件的定义
Vue只是在组件需要渲染的时才触发工厂函数并把结果缓存起来
用于再次渲染，推荐配合webpack代码分割功能使用
-->
Vue.component("AsyncComponent", (resolve, reject) => {
setTimeout(()
=> {
require([
"./async-component"],
resolve);
},
1000);
});
//高级异步组件
const
AsyncComponent = ()
=> ({
component:
import(
"./async-component"),
loading:
Dynamic,
// loading时渲染
error:
Dynamic,
// 出错时渲染
delay:
2000,
// 当前组件等待时间
timeout:
3000
// 最长等待时间
});
扫描二维码关注公众号，回复：
5175990 查看本文章
1，递归组件