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;
}

vue组件化中slot怎么用

3.作用域插槽

子组件

Tips:

作用于插槽也可是具名插槽

案例：列表组件

这是作用于插槽使用最多的案例，允许组件自定义应该如何渲染组件的每一项。

子组件myList.vue

其实上面的案例可直接在父组件中for循环就好，此处只是作为演示slot的作用域插槽；

实际开发中作用域插槽的使用场景主要为：既可以复用子组件的slot，又可以使slot内容不一致。

4.访问slot

vue2.0提供了$slot方法来访问slot

此处代码以**“具名slot（同时使用多个插槽）”**的代码为例，修改一下子组件childComponment.vue

export default {
 name: "childComponment",
 data(){
 return {
  message: ''
 }
 },
 mounted(){
 let header = this.$slots.header
 let main = this.$slots.default
 let footer = this.$slots.footer
 console.log(header)
 console.log(main)
 console.log(footer)
 console.log(footer[0].elm.innerHTML)
 }
};

打印结果：

vue组件化中slot怎么用

其中elm的内容为插槽内容，结构如下：

vue组件化中slot怎么用

关于“vue组件化中slot怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

分享名称：vue组件化中slot怎么用-创新互联
网站URL：http://kswsj.cn/article/dspdsd.html

关于创新互联

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

这是子组件childComponment!

This is about page

This is myList page

其他资讯