本文详细介绍了Vue.js中的模板语法，包括使用`v-slot`指令定义插槽，如``定义header插槽，以及如何传递数据到匿名插槽和动态插槽中。同时展示了组件结构，包括`header`、`main`和`footer`部分，通过`v-for`遍历数据并利用插槽展示内容。
<template>
<indexVue>
<!-- v-slot:header 可以简写成 #
<template #header>
<div>我是header插槽插入文本信息</div>
</template> -->
<template v-slot:header>
<div>我是header插槽插入文本信息</div>
</template>
<template v-slot="{ data }">
<div>我是匿名插槽文本 {{ data }}</div>
</template>
<template v-slot:footer>
<div>我是footer插槽插入的文本信息</div>
</template>
</indexVue>
<indexVue>
<template #[name]>
<div>我是动态插槽</div>
</template>
</indexVue>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import indexVue from './Tab/index.vue'
let name = ref('footer') //header footer
</script>
<style lang="less" scoped>
</style>
<template>
<header class="header">
<slot name="header"></slot>
</header>
<main class="main">
<div v-for="(item, index) in data" :key="index">
<slot :data="item"></slot>
</div>
</main>
<footer class="footer">
<slot name="footer"></slot>
</footer>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
type names = {
name: string,
age: number,
}
const data = reactive<names[]>([
{
name: '测试1',
age: 21
},
{
name: '测试2',
age: 22
},
{
name: '测试3',
age: 23
},
{
name: '测试4',
age: 24
},
])
</script>
<style lang="less" scoped>
.header {
height: 200px;
background: red;
color: #fff;
}
.main {
height: 300px;
background: green;
color: #fff;
}
.footer {
height: 200px;
background: blue;
color: #fff;
}
</style>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
