vue组件化中slot怎么用-创新互联

这篇文章将为大家详细讲解有关vue组件化中slot怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

10余年的阳原网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整阳原建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“阳原网站设计”,“阳原网站推广”以来，每个客户项目都认真落实执行。

前言

slot可以在子组件中开启插槽，在父组件引用该组建时，可以定义这个插槽内要展现的功能或模块。

1.单个slot

子组件中在相应位置写slot标签，父组件在引用子组件时，在子组件标签内写要插入插槽的元素；

还可以设置slot在父组件没有设置插槽时，子组件的插槽默认显示内容；

父组件.vue

子组件childComponment.vue

2.具名slot（同时使用多个插槽）

给slot指定一个名称，可以分发多个slot插槽，但是只能有一个无名slot；

父组件的slot插槽内容，不写slot="xxx"的都会插到子组件的无名slot中;

如果没有指定无名slot（默认slot），父组件内多余的内容将会被抛弃。

子组件





.childComponment{
 font-size: 16px;
}
.header{
 height: 100px;
 border:1px solid red;
 color: red;
}
.container{
 height: 500px;
 border: 1px solid black;
 color: black;
}
.footer{
 height:100px;
 border: 1px grey solid;
 color: grey;
}