Vue组件的高级用法

Posted 2021-02-09 niusan

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