Vue專欄 - 你不知道的組件用法篇
目錄:
-
遞歸組件
-
內聯模板
-
動態組件
Vue中組件也有很多黑科技騷操作, 雖然在開發中這些騷操作可能沒那麼頻繁的使用到, 但是在某種情況下他又可以幫助你開發更加的得心應手, 也能夠讓你對Vue的組件功能有一個更加全面的認識
遞歸組件
遞歸算法這哥們大家應該都不陌生了吧, 遞歸組件也就是這麼個道理, 組件在內部遞歸的調用自身, 至於怎麼調用自身, 平時不起眼的name屬性這時候就有大作用了, 直接看實例
...
<body>
<div id="app">
<cmp-a></cmp-a>
</div>
<script>
const CmpA = {
name: 'cmp',
// 遞歸最重要的就是找出口, 這裏的出口就是count < 3
// 而我每次都會將count + 1 以後傳給下一個cmp組件,所以count會到3
// 到3就終止遞歸, 注意模板在遞歸的時候我用的是name屬性中的cmp
// 而不是組件名字cmpA
template: `<div>
helloWorld, {{ count }},
<cmp v-if='count < 3' :count='count + 1'></cmp>
</div>`,
props: {
'count': {
type: Number,
default: 1
}
}
}
const vm = new Vue({
el: '#app',
components: {
CmpA
}
})
</script>
</body>
...
執行結果如圖
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-45BIo7as-1583485771437)('...')]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200306170959920.png)
遞歸組件主要是用來做樹結構或者二三級聯動菜單, 用的並不多, 混個臉熟就好
內聯模板
我們一般會將組件的模板定義在template選項中, Vue其實給我們提供了一個內聯模板的功能, 在使用組件時, 給組件標籤加上inline-template屬性, 組件就會把他的開閉標籤中我們書寫的代碼當作模板, 而不會把他當作slot進行分發, 來看個實例
...
<body>
<div id="app">
<!-- 只要給cmpA組件打上inline-template特性, 在他中間書寫的代碼就會被當作template進行編譯 -->
<cmp-a inline-template>
<div>
<div>
{{ info }}
</div>
</div>
</cmp-a>
</div>
<script>
const CmpA = {
data() {
return {
info: 'Hello, 我是子組件的數據'
}
}
}
const vm = new Vue({
el: '#app',
components: {
CmpA
}
})
</script>
</body>
...
執行結果如下
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-o3hqu2aH-1583485771439)('...')]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200306171009977.png)
動態組件
Vue給我們提供一個特殊的元素component用來動態的掛載不同的組件, component上有一個is屬性來控制component掛載不同的組件, 有點類似於v-if, v-else
...
<body>
<div id="app">
<component :is='status ? "cmpA" : "cmpB"'></component>
<button @click='changeStatus'>來回切換AB組件</button>
</div>
<script>
const CmpA = {
template: `<div>我是A組件</div>`
}
const CmpB = {
template: `<div>我是B組件</div>`
}
const vm = new Vue({
el: '#app',
components: {
CmpA,
CmpB
},
data: {
status: true
},
methods: {
changeStatus() {
this.status = !this.status;
}
}
})
</script>
</body>
...
執行結果如圖, 我們就實現了AB組件的切換
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-PkUML1AA-1583485771440)('...')]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200306195427557.gif)
還有一些其他的比如異步組件其實不太用得到, 朋友如果感興趣可以自己去看看