别再瞎写Vue3模板代码！常用模板合集+避坑技巧，新手直接用

别再瞎琢磨了！这篇文章直接把你日常开发里最常用的Vue3模板整理好了——从基础的组件结构、表单双向绑定，到列表循环、父子组件通信，甚至是模态框、分页这些高频场景，每个模板都写得明明白白，复制就能用，不用再自己苦搭架子。

更关键的是，我们还把新手最容易踩的“模板坑”揪了出来：比如v-model的新语法糖别再用错，slot-scope早换成v-slot了，循环时key值不能用索引……这些看似小却超影响效率的错误，一次性帮你排干净。

不管你是刚入门的小白，还是偶尔写模板的新人，这篇就是你的“模板急救包”——既能直接拿模板解决问题，又能避开坑少走弯路，看完再也不用“瞎写Vue3模板”！

你是不是也遇到过这种情况？刚学Vue3写模板，明明跟着视频敲的代码，结果表单输入半天数据不更新，插槽里的内容死活不显示，循环列表删个元素就乱成一锅粥——明明是基础功能，却折腾得满头大汗？去年我帮刚转行做前端的小夏改代码时，她的电脑屏幕上全是红波浪线，嘴里念叨着“Vue3的模板怎么这么难”，我一看她的代码：v-model绑错了props名，插槽还用着Vue2的slot-scope，循环的key值直接用了index……得，全是新手最常踩的坑。

今天我就把自己踩过的坑、用过不下十次的高频模板整理出来——不用你再翻文档试错，直接复制就能用，还能避开90%的低级错误。

新手最常踩的3个Vue3模板坑，我帮你踩过了

去年小夏的“翻车现场”不是个例，我接触过的10个Vue3新手里，有8个都栽在这3个坑里。别嫌我啰嗦，这些坑我帮你踩过了，你直接绕开就行。

小夏的第一个问题是表单输入框数据不更新：她写了个登录组件，用v-model="form.username"绑输入框，结果输入时console.log(form)还是空值。我一看她的子组件代码——props: ['username']，然后this.$emit('input', value)——这明显是把Vue2的.sync和Vue3的v-model搞混了！

Vue3的v-model其实是props+emit的语法糖，官方文档里写得明明白白：Vue3把Vue2的v-model和.sync合并了，默认用modelValue当props名，update:modelValue当emit事件名。比如子组件要支持v-model，得这么写：

<!-
子组件 Input.vue >

 type="text" 
 value="modelValue" 
 @input="$emit('update:modelValue', $event.target.value)"
 >
defineProps(['modelValue']) // 接收父组件的modelValue

defineEmits(['update:modelValue']) // 触发更新事件

父组件用的时候直接v-model="form.username"就行。小夏改完代码后拍着脑门说：“原来不是加个v-model就行，得跟着Vue3的规则来！”

小夏的第二个坑是插槽内容不显示：她写了个卡片组件，里面用放标题，结果父组件用标题——页面上啥都没有。我跟她说：“Vue3里slot-scope和slot属性都废弃了，必须用v-slot！”

Vue3的插槽只有v-slot（或#简写）才有效，不管是默认插槽还是命名插槽。比如父组件用卡片组件得这么写：

 <!-
命名插槽用#header >
 这是卡片标题
 <!-
默认插槽直接写内容 >
 这是卡片正文

我当时翻着Vue官方的《迁移指南》给她看：“你看，官方明确说‘slot attribute is deprecated’，不用v-slot的插槽，Vue3根本不识别。”她赶紧把代码里的slot改成#header，页面瞬间就显示了。

小夏的第三个坑是循环列表删除元素就乱序：她做商品列表时，用v-for="(item, index) in list" key="index"，结果删了第二个商品，第三个商品的内容突然变成第二个的。我问她：“你知道key的作用吗？”——key是Vue用来识别列表元素唯一性的，用index当key，删元素后后面的index会变，Vue就会误以为元素没变，导致渲染错误。

正确的做法是用数据里的唯一ID当key，比如item.id：

 {{ item.name }} 

{{ item.price }}

我去年做电商项目时，一开始也用索引当key，结果删商品时购物车总价算错了，后来改成item.id，问题立马解决。Vue官方文档里反复强调：“尽可能用唯一ID当key，避免用索引。”这句话我记在笔记本第一页，现在送给你。

6个高频Vue3模板合集，复制就能用

踩完坑，咱们直接上“硬货”——我做项目时用了不下十次的高频模板，覆盖80%的开发场景，你改改数据就能用，省下来的时间去喝杯奶茶不香吗？

先看个“万能基础组件模板”：适合写按钮、输入框

不管是做后台管理系统还是电商页面，通用组件肯定要写——比如按钮、输入框、标签这类重复用的组件。我做过的5个项目里，这个模板用了至少20次：

<!-
基础按钮组件 BaseButton.vue >
 
 class="base-btn"
 class="['base-btn' + type]"
 @click="$emit('click')"
 >
 <!-
slot传递按钮内容 >


// 定义props：type控制按钮样式，default是默认值

defineProps({

 type: {

 type: String,

 default: 'primary' // primary/success/warning

 }

})

// 定义emit：传递点击事件

defineEmits(['click'])

.base-btn {

 padding: 8px 16px;

 border: none;

 border-radius: 4px;

 cursor: pointer;

}

.base-btnprimary {

 background-color: #409eff;

 color: #fff;

}

/ 其他样式省略 /

适用场景：登录按钮、提交按钮、删除按钮这类通用按钮； 注意事项：slot别空着（不然按钮显示空白），props要加默认值（避免没传type时样式乱了）。

再给你个“表单双向绑定模板”：登录/注册页直接用

做登录、注册、填写信息这类页面，最烦的就是绑v-model——我帮小夏改的就是这个模板。直接复制这个代码，改改字段名就能用：

<!-
登录表单 LoginForm.vue >



 用户名

 type="text" 
 v-model="form.username" 
 placeholder="请输入用户名"
 >




 密码

 type="password" 
 v-model="form.password" 
 placeholder="请输入密码"
 >


 登录

import { reactive } from 'vue'

import BaseButton from './BaseButton.vue'

// 用reactive定义响应式表单数据

const form = reactive({

 username: '',

 password: ''

})

// 提交事件

const handleSubmit = () => {

 if (!form.username || !form.password) {

 alert('请填写完整信息')

 return

 }

 console.log('提交数据：', form)

 // 这里写调用接口的逻辑

}

为什么这么写？：Vue3里用reactive定义复杂数据（比如对象）比ref更方便，不用加.value；@submit.prevent阻止表单默认刷新，这是前端开发的“基本操作”——我做过的所有表单页面都加了这个。

6个高频模板全在这里，复制就行

为了让你更清楚，我把常用模板整理成了表格，直接对照场景用：

我上周做一个后台管理系统的用户列表，直接用了“列表循环模板”和“分页组件模板”——列表循环绑item.id当key，分页组件传total=100、pageSize=10，然后emit(‘pageChange’, currentPage)，父组件接收后调接口拿数据，半小时就搞定了，比自己从零写快多了。

这些模板和技巧我用了一年多，帮过3个新手顺利完成项目，你要是试了有问题，评论区留个言——我帮你看看。对了，别光顾着收藏，赶紧打开VSCode复制一个模板试试，比看十遍视频管用！

Vue3里绑v-model的表单输入框为什么数据不更新？

这大概率是把Vue2的写法带到Vue3里了。Vue3的v-model其实是“props+emit”的语法糖，默认要用modelValue当props名，update:modelValue当emit事件名。比如子组件得写defineProps([‘modelValue’])接收父组件的值，再用@input=”$emit(‘update:modelValue’, 值)”触发更新，父组件直接v-model绑就行。之前帮小夏改代码时，她就是没按这个规则来，导致输入半天数据没变化。

记住别用Vue2的.sync或者自己乱改props名，跟着Vue3的官方规则走，数据肯定能更新。

Vue3的插槽用slot怎么不显示内容？

因为Vue3里已经废弃slot和slot-scope属性了，必须用v-slot或者#简写。比如子组件用，父组件得写内容，要是还像Vue2那样写slot=”header”，页面肯定空白。之前小夏就栽在这，改完v-slot立马就显示了。

你可以翻Vue3的迁移指南看看，官方明确说slot属性不用了，赶紧把旧写法换了吧。

循环列表的key用index为什么删元素会乱序？

key是Vue用来识别列表元素唯一性的，要是用index当key，删一个元素后，后面元素的index会跟着变，Vue就会误以为元素没变化，导致渲染混乱。比如你删第二个元素，第三个元素的index从2变成1，Vue就会把原来第三个元素的内容放到第二个位置，看起来就乱了。

正确的做法是用数据里的唯一ID，比如item.id，这样不管怎么删元素，每个元素的key都不变，Vue就能正确渲染了。

文章里的基础组件模板为什么要加slot？

slot是用来给组件传递“可变内容”的，比如基础按钮组件，你可能需要不同的按钮文字（比如“登录”“提交”），要是不加slot，组件的按钮就会显示空白或者固定文字，没法复用。比如文章里的BaseButton组件，slot就是用来放按钮文字的，父组件用的时候直接写登录，文字就传进去了。

要是没有slot，每个按钮都得写不同的组件，那基础组件的意义就没了，所以slot是基础组件复用的关键。

表单模板里用reactive而不用ref是为什么？

因为表单通常是复杂对象（比如有username、password多个字段），用reactive定义的话，直接操作对象的属性就行，不用像ref那样加.value，更方便。比如文章里的登录表单，form是reactive({ username: ”, password: ” })，绑v-model=”form.username”直接用，要是用ref的话，得写form.value.username，麻烦多了。

当然如果是单个字段，用ref也没问题，但表单这种多字段的情况，reactive更适合。

YUANLEISVIP

收藏 链接