vue-cil组件引用

这段子组件代码是一个使用Vue 3 及其新特性 <script setup> 语法糖、以及 Ant Design Vue 图标库的简单组件示例。它根据传入的prop icon 来决定渲染哪一个图标。

javascript 复制代码
<template>
  <DesktopOutlined v-if="icon==='desktop'"/>
  <HomeOutlined v-else-if="icon==='home'"/>
  <TeamOutlined v-else-if="icon==='team'"/>
  <UserOutlined v-else-if="icon==='user'"/>
  <SettingOutlined v-else-if="icon==='settings'"/>
  <CloudUploadOutlined v-else-if="icon==='cloud'"/>
  <GithubOutlined v-else-if="icon==='git'"/>
  <HistoryOutlined v-else-if="icon==='history'"/>
  <MonitorOutlined v-else-if="icon==='monitor'"/>
  <FileOutlined v-else/>
</template>

<script setup>

const props = defineProps({
  icon: String
})

import {
  CloudUploadOutlined,
  DesktopOutlined,
  FileOutlined,
  GithubOutlined,
  HistoryOutlined,
  HomeOutlined,
  MonitorOutlined,
  SettingOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';</script>

<style scoped>

</style>

下面是这段代码的逐行解析:

<template>部分:

<template>部分定义了组件的HTML结构。在这个例子中,它通过一系列的条件判断(v-ifv-else-if)来确定渲染哪一个Ant Design Vue的图标组件。

  • 根据icon属性的值,这个模板会渲染不同的图标。例如,如果icon的值为"desktop",那么将渲染<DesktopOutlined>组件。
  • 如果所有的条件判断都不满足(即icon的值不是预设的任一值),将作为默认情况渲染<FileOutlined>图标。

<script setup>部分:

<script setup> 是 Vue 3 中引入的一个新增特性,旨在提供更简洁的组合式API(Composition API)使用方式。在这一部分:

  • defineProps函数用于定义组件的props。在这个例子里,定义了一个名为icon的prop,其类型为String
  • 然后通过import语句从@ant-design/icons-vue包中引入了一系列图标组件。

这意味着,当你使用这个组件并传入不同的icon值时,组件将对应地渲染出不同的图标。例如:

html 复制代码
<!-- 渲染一个'家'的图标 -->
<YourComponent icon="home"/>

<style scoped>部分:

  • 这个部分允许你为这个组件定义样式,并且由于scoped属性的存在,这些样式仅作用于本组件,不会影响到其他组件或全局样式。

使用 <script setup> 语法糖定义的组件可以接收父组件传来的 props。在您提供的例子中,子组件期望接收一个名为 icon 的 prop,其数据类型为 String。以下是如何在父组件中使用这个子组件,并且如何传递 icon prop 的步骤。

定义子组件

首先,定义子组件时,使用了 <script setup> 语法,和 defineProps函数来声明它期望接收的 prop。如您所示:

html 复制代码
<!-- 子组件 MyIconComponent.vue -->
<script setup>
// 通过 defineProps 定义组件接收的 props
const myProps = defineProps({
  icon: String
});
</script>

<template>
  <div>Icon:{{ myProps.icon }}</div>
</template>

在这个例子中,子组件被命名为 MyIconComponent,并且它期望从父组件那里接收一个类型为 String 的 prop,名为 icondefineProps 返回的对象被赋值给 myProps,这样在模板中就可以通过 myProps.icon 来访问这个值。

使用子组件

在父组件中使用 MyIconComponent 时,需要先导入这个组件,然后就可以把 icon prop 传递给它。下面是如何做的:

  1. 首先,在父组件中导入 MyIconComponent 子组件。
  2. 然后,在父组件的模板中使用 <MyIconComponent> 标签,并通过 :icon 绑定属性传递数据。
html 复制代码
<!-- 父组件 ParentComponent.vue -->
<template>
  <div>
    <!-- 使用子组件,并传递 icon prop -->
    <MyIconComponent :icon="'home'" />
  </div>
</template>

<script setup>
// 导入子组件
import MyIconComponent from './MyIconComponent.vue';
</script>

在这个例子中,父组件通过 :icon="'home'" 给子组件 MyIconComponent 传递了一个字符串 "home" 作为 icon prop 的值。注意,这里的冒号 : 是个简写,表示这是一个 JavaScript 表达式,也就是说我们传递的是 "home" 这个字符串而非 "icon" 这个字符串的变量名。

总结

子组件通过 defineProps 定义期望接收的 props,父组件通过 prop 绑定(如 :icon="value")传递数据给子组件。这样,子组件就能够接收来自父组件的数据,并在其模板或逻辑中使用这些数据了。

相关推荐
全宝5 分钟前
🔢前端解决浮点数运算精度丢失的问题
前端·javascript
前端双越老师11 分钟前
学不动了?没事,前端娱乐圈也更新不动了
javascript·react.js·ai编程
江城开朗的豌豆12 分钟前
JavaScript篇:偷懒也有理!事件代理让我少写一半代码
前端·javascript·面试
云浪27 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨33 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗35 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码37 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜39 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军44 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试