具名插槽 slot使用

1.普通的子组件插槽
//Children.vue
<div><slot></slot>
</div>

使用

<Children><span>123</span>
</Children>

2.具名插槽
//Children.vue

<div><span>123</span><slot name="content"></slot>
</div>

使用

<Children><span slot="content">456</span> //会替换子组件slot内容和位置
</Children>

3.作用域插槽

//子组件
<template><div><span><slot :userData="user" name="header">{{ user.msg }}</slot><slot :hobbyData="hobby" name="footer">{{ hobby.fruit }}</slot></span></div>
</template><script>export default {data () {return {user:{firstName: 'gerace',lastName: 'haLi',},hobby:{fruit: "apple",color: "blue"}}}}
</script>
<style>
</style>

//父组件
<template><myslot><template v-slot:header="slotProps">{{ slotProps.userData.firstName }}</template><template v-slot:footer="slotProps">{{ slotProps.hobbyData.fruit }}</template></myslot>
</template><script>import myslot from './myslot';export default {components: {myslot}
</script>
<style>
</style>

针对多个插槽的情况，在写法上可以解构插槽prop，具名插槽可以使用缩写，v-slot可以使用#来代替，所以以上代码可以写成：

父组件

<template><myslot><template #header="{userData}">{{ userData.firstName }}</template><template #footer="{hobbyData}">{{ hobbyData.fruit }}</template></myslot>
</template><script>import myslot from './myslot';export default {components: {myslot}}
</script>
<style>
</style>

但是需要注意的是该缩写只在其有参数(名字)的时候才可用。这意味着以下语法是无效的：

<!-- 这样会触发警告 -->
<template><myslot><template #="{userData}">{{ userData.firstName }}</template><template #="{hobbyData}">{{ hobbyData.fruit }}</template></myslot>
</template>

总结:
1.子组件
不传参数

<slot name="one"></slot>

传递参数
user 为子组件内定义默认数据

<slot :one="user"></slot>

写法未改变

2.父组件
2.1 vue2.6.0+废弃slot=‘name’ 但仍可以使用
2.2 使用简单缩写的定义 #header 使用：要用一个 template标签包裹

<template #one> </template >

2.3 v-slot
匿名的作用域插槽和具名的作用域插槽区别在于:
v-slot:defult=“接受的名称”(defult(匿名的可以不写，具名的相反要写的是对应的name))

v-solt可以解构接收解构接收的字段要和传的字段一样才可以例如 :one 对应 v-slot="{one}"

//注意上面图中子组件数据绑定方式

参考文章

具名插槽 slot使用相关推荐

Dialog具名插槽slot的使用，更换多种title标题
平时写项目的时候难免会遇到不同功能相似的Dialog弹框,可是Dialog的title是一个字符串,怎样能再title中书写两个或多个标题呢? 问题:如下图指示,他们两个使用了一个Dialog弹框,但 ...
vue 中的插槽Slot基本使用和具名插槽
一.插槽Slot的作用 1.为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div.span等等这些元素: 2.比如某些情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使 ...
Vue2中插槽使用——默认插槽、具名插槽、作用域插槽
Vue中插槽使用--默认插槽.具名插槽.作用域插槽插槽(slot) 默认插槽具名插槽作用域插槽插槽(slot) 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适 ...
理解vue中的插槽------slot与slot-scope-已整理
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板.该模板是否显示,以及如何显示由其父组件说了算.不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传 ...
Vue的插槽slot的理解
Vue中插槽slot的理解 1.什么是插槽 2.插槽分类单个插槽具名插槽作用域插槽 3.版本升级后 v-slot的用法默认插槽还是使用,没有变化具名插槽作用域插槽本文将从之前的slot. ...
vue2到vue3中插槽slot变化详解---从slot，slot-scope到v-slot的变化
文章目录前言默认插槽具名插槽作用域插槽解构prop的写法 v-solt 默认插槽独占默认插槽 v-solt具名插槽 v-solt作用域插槽解构props的写法动态插槽名插槽的缩写前 ...
Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装
想利用暑假时间好好学习一下vue,会记录每一天的学习内容. 今天是学习vue的第6天! 起起伏伏乃人生常态,继续加油- 学习内容 1. 插槽slot slot基本使用具名插槽slot 2. 编译作用 ...
VUE之组件（插槽slot与可复用组件）
插槽slot 首先创建个基础组件,然后在页面调用显示,如下所示 <div id="app"><blog></blog></div>& ...
Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）
一.认识插槽Slot 在开发中,我们会经常封装一个个可复用的组件: 前面我们会通过props传递给组件一些数据,让组件来进行展示: 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定 ...

具名插槽 slot使用

具名插槽 slot使用相关推荐

最新文章

热门文章