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)
还有一些其他的比如异步组件其实不太用得到, 朋友如果感兴趣可以自己去看看