当前位置：首页 > article >正文

＜template＞标签的作用，在构建可复用 UI 片段时如何应用？

article 2026/2/23 10:07:53

大白话标签的作用，在构建可复用 UI 片段时如何应用

`<template>`标签的作用

在前端开发里，<template>标签可是个超棒的工具。它就像是一个“代码仓库”，可以把一些 HTML 代码片段存起来，而且这些代码片段在页面刚加载的时候是不会显示出来的。只有当你想用这些代码的时候，才把它们从“仓库”里拿出来，放到页面合适的位置去显示。这样做有啥好处呢？它能让你把一些常用的 UI 片段封装起来，需要的时候直接用，避免了代码的重复编写，提高了开发效率。

在构建可复用 UI 片段时的应用

下面我用一个简单的例子来详细讲讲怎么用<template>标签构建可复用的 UI 片段。假设我们要做一个商品列表，每个商品都有图片、标题和价格，而且这个商品的样式可能在很多地方都会用到，这时候就可以用<template>标签把商品的 HTML 结构封装起来。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Template Example</title>
</head><body><!-- 创建一个 template 标签，用来存放商品的 HTML 结构 --><template id="product-template"><!-- 商品的容器 --><div class="product"><!-- 商品图片，这里用占位图代替 --><img src="https://dummyimage.com/200x200/000/fff" alt="Product Image"><!-- 商品标题 --><h2 class="product-title">Product Title</h2><!-- 商品价格 --><p class="product-price">$99.99</p></div></template><!-- 这里是用来显示商品列表的容器 --><div id="product-list"></div><script>// 获取 template 元素const productTemplate = document.getElementById('product-template');// 获取用来显示商品列表的容器const productList = document.getElementById('product-list');// 模拟一些商品数据const products = [{ title: 'Product 1', price: '$19.99' },{ title: 'Product 2', price: '$29.99' },{ title: 'Product 3', price: '$39.99' }];// 遍历商品数据products.forEach(product => {// 克隆 template 里的内容，true 表示深克隆，会把里面所有子元素都克隆const clone = document.importNode(productTemplate.content, true);// 找到克隆内容里的商品标题元素，并更新标题文本const titleElement = clone.querySelector('.product-title');titleElement.textContent = product.title;// 找到克隆内容里的商品价格元素，并更新价格文本const priceElement = clone.querySelector('.product-price');priceElement.textContent = product.price;// 把克隆好并更新内容的商品添加到商品列表容器里productList.appendChild(clone);});</script>
</body></html>

通过这种方式，你就可以用<template>标签构建可复用的 UI 片段啦，需要的时候就克隆一份，然后根据数据更新内容，再添加到页面上。

<template>标签和components（组件）在前端开发里用途有相似之处，不过它们在概念、功能和使用场景等方面存在明显区别，下面为你详细介绍：

<template>标签和components组件的区别是什么？

概念层面

<template>标签：它是 HTML 标准里的元素，就像一个“代码仓库”，能够把 HTML 代码片段存储起来，在页面初始加载时这些代码不会显示，只有在需要的时候才会被使用。
components组件：这是一种抽象的编程概念，在前端框架（像 Vue、React 等）中经常用到。它把 HTML、CSS、JavaScript 等代码封装在一起，形成一个独立的、可复用的单元。

功能特性

<template>标签
- 内容不可见：页面加载时，<template>标签里的内容不会渲染显示，只有在通过 JavaScript 动态插入到文档中才会显示。
- 静态结构：<template>主要用于存储静态的 HTML 结构，虽然可以通过 JavaScript 动态修改内容，但本身不具备复杂的交互逻辑和状态管理功能。
- 轻量级：仅包含 HTML 结构，不涉及额外的框架逻辑，使用简单，对性能影响较小。
components组件
- 状态管理：组件可以有自己的状态，并且能根据状态的改变更新视图。例如在 Vue 组件里可以使用data选项来定义状态，在 React 组件中可以用useState Hook 或者类组件的state属性来管理状态。
- 生命周期管理：组件有自己的生命周期函数，在不同的阶段执行特定的操作。例如在 Vue 组件中有created、mounted等生命周期钩子，在 React 组件中有componentDidMount、componentWillUnmount等生命周期方法。
- 事件处理：组件能够定义自己的事件处理逻辑，方便实现交互功能。例如在 Vue 组件里可以使用@click等指令绑定事件，在 React 组件中可以使用onClick属性绑定事件处理函数。

使用场景

<template>标签
- 简单复用：当只需要复用简单的 HTML 结构，不需要复杂的交互和状态管理时，<template>标签是很好的选择。例如复用一个简单的商品卡片、评论框等。
- 动态插入：需要根据用户的操作动态插入 HTML 片段时，可以使用<template>标签。例如点击按钮后动态添加一个列表项。
components组件
- 复杂交互：在需要实现复杂交互逻辑和状态管理的场景下，组件是首选。例如一个电商网站的购物车组件，需要处理商品的添加、删除、数量修改等操作。
- 大型项目：在大型前端项目中，使用组件可以提高代码的可维护性和可扩展性。将页面拆分成多个组件，每个组件负责一个特定的功能，便于团队协作开发。

示例对比

`<template>`标签示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Template Example</title>
</head><body><!-- 定义一个 template 标签，存储商品卡片的 HTML 结构 --><template id="product-template"><div class="product"><h2 class="product-title">Product Title</h2><p class="product-price">$99.99</p></div></template><!-- 商品列表容器 --><div id="product-list"></div><script>// 获取 template 元素const productTemplate = document.getElementById('product-template');// 获取商品列表容器const productList = document.getElementById('product-list');// 模拟商品数据const products = [{ title: 'Product 1', price: '$19.99' },{ title: 'Product 2', price: '$29.99' }];// 遍历商品数据products.forEach(product => {// 克隆 template 内容const clone = document.importNode(productTemplate.content, true);// 更新标题和价格const titleElement = clone.querySelector('.product-title');titleElement.textContent = product.title;const priceElement = clone.querySelector('.product-price');priceElement.textContent = product.price;// 将克隆的内容添加到商品列表中productList.appendChild(clone);});</script>
</body></html>

Vue 组件示例

<template><!-- 组件的 HTML 结构 --><div class="product"><h2>{{ product.title }}</h2><p>{{ product.price }}</p><button @click="addToCart">Add to Cart</button></div>
</template><script>
export default {// 组件的属性props: {product: {type: Object,required: true}},// 组件的方法methods: {addToCart() {// 模拟添加到购物车的操作console.log(`Added ${this.product.title} to cart`);}}
};
</script><style scoped>
/* 组件的样式 */
.product {border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;
}
</style>

综上所述，<template>标签适合简单的 HTML 结构复用和动态插入，而components组件更适合处理复杂的交互逻辑和状态管理，在大型项目中能发挥更大的作用。