load 層級關系 ack time 使用 遞歸 ror line 否則

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組件的高級用法