Vue组件的高级用法
1，递归组件
<!--
递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。
设置那么House在组件模板内就可以递归使用了,不过需要注意的是，
必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
组件递归用来开发一些具体有未知层级关系的独立组件。比如：
联级选择器和树形控件
-->
父组件
<recursion:count="1"></recursion>
// recursion.vue
<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 // 最长等待时间
});
1，递归组件
以上是 Vue组件的高级用法 的全部内容， 来源链接： utcz.com/z/375339.html
