Vue 常用组件介绍博客

2025/7/5 5:20:57 来源：https://blog.csdn.net/zru_9602/article/details/147019145 浏览: 次关键词：Vue 常用组件介绍博客

Vue 常用组件介绍博客

Vue 在实际开发过程中，离不开各种常用组件。合理使用组件可以大幅提升开发效率和代码可维护性。本文将介绍 Vue 中一些常用组件及其使用示例。

一、Button 按钮组件

使用场景

用于提交、触发事件、操作入口。

示例

<template><button @click="handleClick">点击我</button>
</template><script>
export default {methods: {handleClick() {alert('按钮被点击了');}}
}
</script>

二、Input 输入框组件

使用场景

用于数据录入、搜索输入、表单提交。

示例

<template><input v-model="inputValue" placeholder="请输入内容" /><p>你输入的是：{{ inputValue }}</p>
</template><script>
export default {data() {return {inputValue: ''};}
}
</script>

三、Dialog 弹窗组件

使用场景

用于提示、确认、展示信息。

示例

<template><div><button @click="showDialog = true">打开弹窗</button><div v-if="showDialog" class="dialog"><p>这是一个弹窗</p><button @click="showDialog = false">关闭</button></div></div>
</template><script>
export default {data() {return {showDialog: false};}
}
</script>

四、Tabs 标签页组件

使用场景

用于内容分类展示、页面切换。

示例

<template><div><button @click="activeTab = 'A'">标签A</button><button @click="activeTab = 'B'">标签B</button><div v-if="activeTab === 'A'">内容A</div><div v-if="activeTab === 'B'">内容B</div></div>
</template><script>
export default {data() {return {activeTab: 'A'};}
}
</script>

五、Table 表格组件

使用场景

用于数据展示、批量操作、数据管理。

示例

<template><table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr v-for="(item, index) in tableData" :key="index"><td>{{ item.name }}</td><td>{{ item.age }}</td></tr></table>
</template><script>
export default {data() {return {tableData: [{ name: '张三', age: 20 },{ name: '李四', age: 25 }]};}
}
</script>