vue组件化中slot怎么用

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

成都创新互联公司专注于额敏网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供额敏营销型网站建设，额敏网站制作、额敏网页设计、额敏网站官网定制、小程序制作服务，打造额敏网络公司原创品牌,更为您提供额敏网站排名全网营销落地服务。

前言

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怎么用