在 Vue.js 中，<template> 标签是一种特殊的标签，它用于定义组件的模板，但不会直接渲染为 HTML 元素。它的主要用途是在编写组件和使用插槽时提供灵活的模板定义。以下是关于 <template> 标签的一些关键概念和使用示例。
基本用法
- 组件模板：在单文件组件中（.vue 文件），
<template>标签用于包裹组件的模板部分。
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello, Vue!',
message: 'Welcome to the Vue.js world.'
};
}
};
</script>
2.条件渲染：结合 v-if 和 v-else 指令，<template> 标签可以用于包裹多元素结构。
<template>
<div>
<template v-if="loggedIn">
<p>Welcome back, user!</p>
<button @click="logout">Logout</button>
</template>
<template v-else>
<p>Please log in.</p>
<button @click="login">Login</button>
</template>
</div>
</template>
<script>
export default {
data() {
return {
loggedIn: false
};
},
methods: {
login() {
this.loggedIn = true;
},
logout() {
this.loggedIn = false;
}
}
};
</script>
循环渲染：结合 v-for 指令，<template> 标签可以用于包裹循环渲染的多元素结构。
<template>
<div>
<ul>
<template v-for="(item, index) in items" :key="index">
<li>{{ item.name }}</li>
<li>{{ item.value }}</li>
</template>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Item 1', value: 100 },
{ name: 'Item 2', value: 200 },
]
};
}
};
</script>
插槽 (Slots)
在 Vue.js 中，插槽用于向子组件传递内容。通过 <template> 标签和插槽属性，可以自定义子组件内部的内容布局。
基本插槽
子组件 (ChildComponent.vue)
<template>
<div>
<slot></slot> <!-- 默认插槽 -->
</div>
</template>
父组件 (ParentComponent.vue)
<template>
<div>
<ChildComponent>
<p>This is passed to the child component.</p>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
命名插槽
子组件 (ChildComponent.vue)
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot> <!-- 默认插槽 -->
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
父组件 (ParentComponent.vue)
<template>
<div>
<ChildComponent>
<template #header>
<h1>This is the header</h1>
</template>
<p>This is the main content passed to the default slot.</p>
<template #footer>
<p>This is the footer</p>
</template>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
作用域插槽 (Scoped Slots)
子组件 (ChildComponent.vue)
<template>
<div>
<slot :items="items"></slot> <!-- 传递作用域数据 -->
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
]
};
}
};
</script>
父组件 (ParentComponent.vue)
<template>
<div>
<ChildComponent>
<template #default="scope">
<ul>
<li v-for="item in scope.items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
总结
<template> 标签在 Vue.js 中具有多种用途，包括定义组件模板、实现条件和循环渲染，以及使用插槽自定义子组件内容。它提供了一种灵活的方式来编写和组织 Vue 组件，使得组件之间的内容传递和布局定制更加方便和强大。