vue3 icon

作者：术之影发布日期:2025-12-22 浏览:30

<template>
  <div>
    <!-- 使用 Icon 组件，通过传入 name 属性来指定图标 -->
    <Icon name="home" />
    <Icon name="user" />
    <Icon name="setting" />
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';
import Icon from './components/Icon.vue'; // 假设 Icon 组件在 components 文件夹中

// 这里定义了一个简单的组件，使用了自定义的 Icon 组件来展示图标。
// Icon 组件可以根据传入的 name 属性来动态加载不同的图标。
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>

解释说明：

模板部分 (<template>)：我们使用了 Icon 组件，并通过 name 属性传递不同的图标名称（如 "home", "user", "setting"）。
脚本部分 (<script setup>)：引入了 Vue 3 的组合式 API 并导入了自定义的 Icon 组件。Icon 组件根据传入的 name 属性来显示相应的图标。
样式部分 (<style scoped>)：这里可以添加一些特定的样式来美化图标或调整布局。

上一篇：vue emit 传参

下一篇：vue 安装axios