前言

狭槽可以在子组件中开启插槽，在父组件引用该组建时，可以定义这个插槽内要展现的功能或模块，下面话不多说了，来一起看看详细的介绍吧

1.单个狭槽

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

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

父组件。某视频剪辑软件

模板div class='home '子组件p这是父组件的狭槽替代内容！/p/子组件/div/模板脚本从‘@/components/子组件导入子组件。vue ' export default { name : ' home '，components: { childComponment }，data(){ return { message : ' ' } } }；/script子组件儿童会计。某视频剪辑软件

模板div class=' childComponment ' h2这是子组件儿童行为！/H2插槽span style=' color : red'如果父组件没有插入内容，我这样可以设置默认的显示内容/span/slot/div/template脚本导出默认值{ name : ' childComponment '，data(){ return { message : ' ' } } }；/script2 .具名插槽（同时使用多个插槽)

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

父组件的狭槽插槽内容，不写插槽='xxx '的都会插到子组件的无名狭槽中；

如果没有指定无名插槽（默认槽),父组件内多余的内容将会被抛弃。

模板div class='home '子组件h1插槽=“标头”父组件的页眉/h1 h6插槽="页脚"父组件的页脚/h6 h6父组件的无名插槽-1/h6 p父组件的无名slot-2/p/child-component/div/template脚本从‘@/components/child component导入子组件。vue ' export default { name : ' home '，components: { childComponment }，data(){ return { message : ' ' } } }；/script子组件

模板div class=' childComponment ' span这是子组件儿童组成的正常内容！/span div class='header '插槽名称=' header ' span style=' color : red；'子组件默认header-slot/span/slot/div class=container！-如果没有指定无名插槽（默认槽),父组件内多余的内容将会被抛弃-slot span style=' color : red；'子组件默认无名slot/span/slot/div class=' footer ' slot name=' footer ' span style=' color : red；'子组件默认footer-slot/span/slot/div/div/template脚本导出默认值{ name : '子组件'，data(){ return { message : ' ' } } }；/script样式作用域。子组件{ font-size : 16px}.表头{ height : 100 pxborder :1 px纯红；颜色：红色；}.集装箱{ height : 500 pxborder : 1 px纯黑；颜色：黑色；}.页脚{ height :100 pxborder : 1px灰色固体；颜色：灰色；}/style

3.作用域插槽

模板div class='home '子组件模板slot-scope='slotProps '！-这里显示子组件传来的数据-p { { SlotProps } }/p/template/child-component/div/template脚本从' @/components/child component导入子组件。vue ' export default { name : ' home '，components 3360 { child component } }；/script子组件

模板div class=' childComponment ' span这是子组件儿童组成的正常内容！/span div class='container '！-如果没有指定无名插槽（默认槽),父组件内多余的内容将会被抛弃-槽消息='子组件信息slotData='子组件数据/slot/div/div/模板提示：

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

案例：列表组件

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

模板div class=' about这是关于页面/h1我的列表：books='books '模板槽='bookList '槽-作用域=' mylistpols '李{ { my listbols }。book name } }/Li/template/my-list/div/template脚本从“@/components/my list”导入我的列表。vue ' export default { components : { my list }，data(){ return { books : [{ name 3: ' CSS揭秘}，{name: '深入浅出nodejs'}，{name: 'javascript设计模式与开发实战}]} } }/脚本子组件myList.vue

模板div class=' myList这是我的列表页面/h1 ul插槽名称=' book list ' v-for=' books in books ' : book name=' book。名称/插槽/ul/div/模板脚本导出默认{ props 3360 { books : { type : Array，default : function(){ return[]} }，mounted(){ console。日志(这个。书籍)}/脚本其实上面的案例可直接在父组件中为循环就好，此处只是作为演示狭槽的作用域插槽；

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

4.访问狭槽

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

此处代码以**"具名插槽（同时使用多个插槽)"**的代码为例，修改一下子组件儿童会计。某视频剪辑软件

导出默认{ name: ' childComponment '，data(){ return { message: '' } }，mounted(){ let header=this .$ slots.header让main=这个.$ slots.default让页脚=这个.$老虎机。页脚控制台。日志(标题)控制台。日志(主)控制台。日志(页脚)控制台。日志(页脚[0]。榆树。innerhtml)} }；打印结果：

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。