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，递归组件

转载于:https://www.cnblogs.com/niusan/p/10390514.html