vue3插槽变化
2024-10-21 09:15:12
1.默认插槽还是跟以前一样
2.使用具名插槽时，子组件不变
以前的父组件掉用的时候
<template slot="example">
</template>
现在为
<template v-slot:example>
</template>
或者
<template #example>
</template>
3.作用域插槽
①父组件写法 v-slot=“{子组件插槽定义的值}”,多个值写法v-slot=“{ data,index }”,同时这里也可以简写
#default=“{ data,index }” 这样就可以了
<template>
<div class="home_main">
<Dialog>
<template #header>
<div>
我是头部的内容
</div>
</template> <template v-slot="{ data,index }">
<div>
{{ data.name }}--{{ data.age }}--{{index}}
</div>
</template>
<template #footer>
<div>
我是底部内容
</div>
</template>
</Dialog>
</div>
</template> <script lang="ts" setup>
import Dialog from "../../components/slotDialog/index.vue" </script> <style lang="scss">
.home_main {
width: 100%;
height: 100vh;
background: green;
font-size: 30px;
}
</style>
②子组件写法可以传多个值
<template>
<div class="dialog_main">
<header class="header">
<slot name="header"></slot>
</header>
<main class="main">
<div v-for="(item, index) in dataList" :key="index">
<slot :data="item" :index="index"></slot>
</div> </main>
<footer class="footer">
<slot name="footer"></slot>
</footer>
</div>
</template> <script lang='ts' setup>
import { reactive } from "vue";
type names = {
name: string,
age: number
}
const dataList = reactive<names[]>([{
name: '小林',
age: 26
},
{
name: '小王',
age: 27
}, {
name: '小李',
age: 28
}, {
name: '小石',
age: 29
}, {
name: '小林',
age: 26
}])
</script> <style scoped lang="scss">
.dialog_main {
.header {
height: 20vh;
background: red;
width: 100%;
} .main {
height: 50vh;
width: 100%;
background: yellow;
} .footer {
height: 30vh;
width: 100%;
background: blue;
}
}
</style>
最新文章
- 总结Objective-c常用算法
- Quality Trimming Via Trimmomatic
- Android客户端的图形化拖放操作的设计实现
- 【vc】6_菜 单
- HDU1007 Quoit Design 【分治】
- Linux curses库使用
- applicationhost.config web.config
- MySQL master/slave 模式
- php.ini 文件中配置的意义注释
- 小白的Python之路_day1
- python3 练手实例4 九九乘法口诀表
- JAVA项目启动正常，无法访问
- openstack项目【day24】：OpenStack mitaka部署
- python学习03
- ubuntu16.04开机花屏蓝屏解决方案
- 使用vmimeNET解析账单邮件
- 剑指offer（32）把数组排成最小的数
- [leetcode]8. String to Integer (atoi)字符串转整数
- Mysql 获取表属性
- 【BZOJ1898】[ZJOI2005]沼泽鳄鱼（矩阵快速幂，动态规划）