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，遞歸組件