vue slot具名插槽

具名插槽：即具有名字的插槽，在默认插槽基础上指定插槽的名字（name = " "）。
父组件指明放入子组件的哪个插槽 slot = "footer"，如果是template可以写成 v-slot : footer。

父组件：

语法：<子组件><template v-slot:插槽名>HTML结构 </template></子组件>

<template><div><!-- 具名插槽 --><cell><!-- `<template>`是HTML5新增的一个语义化标签，模板的意思。这个标签本身不会被渲染，因此最终在页面是看不见的。  这个标签类似于div,就是一个空盒子容器。 与div唯一的区别就是它不会渲染。 --><template v-slot:a><button>我是第一个具名插槽 a</button><br /></template><template #b><!--v-slot 可以简写为 # --><button>我是第二个具名插槽 b</button><br /></template><template v-slot:c><button>我是第三个具名插槽 c</button></template></cell></div>
</template><script>
import cell from "@/components/cell.vue";
export default {components:{cell}
}
</script><style></style>

子组件：

语法：<slot name="插槽名"> 默认插槽结构 </slot>

<template><div><!-- <slot> 是 vue 内置组件 生成占位盒子 --><slot name="a"><h1>我是第一个插槽</h1></slot><slot name="b"><h2>我是第二个插槽</h2></slot><slot name="c"><h3>我是第三个插槽</h3></slot></div>
</template><script>
export default {}
</script><style></style>

效果图：

vue slot具名插槽相关推荐

vue不具名插槽与具名插槽
vue不具名插槽与具名插槽需求:面向未来编程,实现在未来中若出现修改内容可以简便的修改,而不需要将全部整改思路:在组件Tabbar.vue(底部导航)当中使用不具名插槽,Tab-bar-item. ...
vue具名插槽的使用
vue的插槽自我总结 vue的匿名插槽(默认插槽) vue的具名插槽 vue的作用域插槽 vue的匿名插槽(默认插槽) 父组件 <div><myslot>我是刚刚</my ...
理解vue中的插槽------slot与slot-scope-已整理
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板.该模板是否显示,以及如何显示由其父组件说了算.不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传 ...
Vue中slot的使用(具名插槽与作用域插槽)
文章目录前言一.什么是插槽二.前期准备三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结四.作用域插槽的使用 1.子组件配置slot ...
Vue —— 进阶插槽（slot）（默认插槽、具名插槽和作用域插槽）
Vue全家桶系列文章目录内容参考链接 Vue2.x - 基础 Vue2.x - 基础 Vue2.x - 进阶(零) 初始化脚手架 Vue2.x - 进阶(一) refs属性.props配置项 V ...
[vue] slot插槽默认插槽，具名插槽，作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果分析再次理解作用域插槽代码: 默认插槽: 具名插槽作用域插槽插槽作用:让父组件可以向子组 ...
vue 中的插槽Slot基本使用和具名插槽
一.插槽Slot的作用 1.为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div.span等等这些元素: 2.比如某些情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使 ...
vue中的slot——单个插槽和具名插槽
v-slot顾名思义,中文意思是插槽.如果你平时常用组件化开发,那相信你对插槽肯定不陌生,它的主要作用就是可以在父组件中将自定义内容插入到子组件中,这句话比较拗口,可以先看个基础的插槽示例. 一.单个 ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...

vue slot具名插槽

父组件：

子组件：

vue slot具名插槽相关推荐

最新文章

热门文章