“VUE3快速入门（1）——搭建开发环境” 的相关文章
VUE3快速入门（8）——属性
本文讲述了组件属性的实现方法，以及如何限制属性的数据类型。 1. 什么是组件的属性组件的属性是指可以由组件的调用者动态设置的参数，组件在运行时根据这些参数展现调用者需要的数据。组件的属性等同于HTML标签的属性。 2. 最简单的一个属性本节实现一个展现员工信息的列表，第一步先传入一个“department”属性用于显示员工所属的部门。 2.1 属性的定义定义属性： import { defineProps } from "vue";//引入defineProps，该函数属于宏函数，实际无需引入 let props = defineProps(["department"]);//声明department为一个属性 defineProps方法传入一个字符串数组，其内容是将要被设为属性的变量名称。该方法同时返回一个对象，该对象由传入该组件所有属性的名称和值组成。 模板部分： <template> <p>所属部门： {{ department }}</p> </template> 2.2 使用组件并设置属性<WorkerTable department="宣传科"></WorkerTable> 3. 强制类型限定接下来新增一个属性：data，该属性是描述员工信息的数组，用于表格展示。其中模板部分如下： <template> <h1>所属部门:{{ department }}</h1> <table id="main"> <thead> <tr> <th scope="col">员工号码</th> <th scope="col">姓名</th> <th scope="col">性别</th> <th scope="col">电话</th> </tr> </thead> <tbody> <tr v-for=" (item, index) in data" :key="item.id"> <th scope="col">{{ item.id }}</th> <td scope="col">{{ item.name }}</td> <td scope="col">{{ item.sex ? '男' : '女' }}</td> <td scope="col">{{ item.tel }}</td> </tr> </tbody> </table> </template> 根据模板的展示需求，员工信息需要包括ID、姓名、性别、电话等字段，如果上级组件传入的属性数据不符合员工字段的要求，则组件会出现显示异常。为避免这样的问题，需要检查属性数据的类型，当类型不符合要求时，禁止上级组件的属性赋值。 3.1 定义新类型利用TS的接口类，定义一个员工数据类型，并导出：（建议新建一个名为WorkerTable的文件夹，该文件夹包含一个子文件夹src，用于存放组件的辅助代码，而组件的入口文件则与src同级） //file：@/component/WorkerTable/src/IWorker.ts export interface IWorker{ // 序列号 id: number, // 姓名 name: string, // 性别 sex: boolean, // 电话(可选) tel?: string } export type IWorkerArray = IWorker[]; 该文件定义了一个员工类：IWorker以及它的数组类型：IWorkerArray。 3.2 类型检查修改组件TS代码： import { type IWorkerArray } from "@/components/WorkerTable/src/IWorker"; defineProps<{department: string, data: IWorkerArray}>();//通过泛型进行类型检查并声明属性 上述代码有两个注意点： 引入类型需要使用type关键字通过泛型的方式进行类型检查时，所有属性均需进行类型检查（要么所有，要么都不） 3.3 属性赋值最后调用该组件的TS部分： import WorkerTable from '@/components/WorkerTable/WorkeTable.vue'; import { ref } from "vue"; let workers = ref([ {id: 1234, sex: true, name: "张三", tel: "13600000000"}, {id: 1235, sex: false, name: "李四", tel: "13600000001"}, {id: 1235, sex: false, name: "王五", tel: "13600000002"}, {id: 1234, sex: false, name: "赵六"} ]); 也可以向ref（reactive）传递泛型，在此处限定workers的类型： import { type IWorkerArray } from '@/components/WorkerTable/src/IWorker'; import { ref } from "vue"; let workers = ref<IWorkerArray>(...); 但由于WorkerTable组件已经进行了类型检查，因此上述代码的写法似乎没必要。 模板部分： <WorkerTable department="办公室" :data="workers"></WorkerTable> 注意： 当传入的属性不符合类型要求时，代码将无法运行，避免显示异常。属性的“：”表示后面的内容作为表达式解析，如果不加“：”，则将会把“worker...
VUE3快速入门（9）——插槽
插槽可以实现组件的样式由调用者决定的功能。本文讲述了默认插槽、具名插槽以及作用域插槽的三种使用方式。 1. 什么是插槽插槽是指组件的部分或全部HTML样式由调用者决定，即动态的Template。例如组件的列表有可能是无序列表、有序列表或图片列表，无法在设计组件时指定，在这种情况下需要使用插槽。 2. 默认插槽默认插槽类似HTML的嵌套标签。本节在上一节的基础上对员工列表组件进行改造(WorkerTableEx)，上一节组件的列表标题使用了<h1>标签，但调用者可能希望行换成其他的形式，这里使用默认插槽实现。 组件代码如下： <template> <slot></slot><!-- 使用默认插槽形成占位符 --> <table id="main"> <!-- 表格部分省略 --> </table> </template> 则调用该组件的代码为： <WorkerTableEx><h2>部门：办公室</h2></WorkerTableEx> <WorkerTableEx><p>部门：办公室</p></WorkerTableEx> <WorkerTableEx><img src="..."/></WorkerTableEx> 这样，表格的标题展示形式由调用者决定，它可以是头部标题、段落或者图片以及其他。 通过在<template>中使用<slot></slot>形成占位符，当调用者在组件标签中插入HTML片段或另一个组件时，VUE将会把插入的内容放到占位符中（有几个占位符就放几个）。 3. 具名插槽有时希望多个占位符展示的内容不一样，这种情况需要使用具名插槽。假如要求表格底部可以显示备注信息，这就需要与展示标题的插槽区分开来： <template> <slot name="title"></slot><!-- 使用具名插槽，标题显示部分 --> <table id="main"> <!-- 表格部分代码省略 --> </table> <slot name="description"></slot><!-- 使用具名插槽，备注显示部分 --> </template> 则调用该组件的代码为： <WorkerTableEx> <template v-slot:title><!-- 使用v-slot指令 --> <h3>部门：办公室</h3> </template> <template #description><!-- v-slot语法糖 --> <p>导出时间：2024年6月26日</p> </template> </WorkerTableEx> 提示： 使用v-slot指令可以指明内容放在组件的哪个插槽内，同时v-slot指令可以简写为“#”。v-slot指令只能用在<template>标签和组件标签上，不能用在HTML标签上，因此使用具名插槽必须把普通HTML代码用<template>标签包裹。由于使用了具名插槽，因此组件展示的内容顺序与调用者的编码顺序无关。 4. 作用域插槽有时会有这样的需求：数据由组件生成（如请求服务器得到后端数据），但展示形式却由调用者决定，这种情况需要使用作用域插槽。作用域插槽常见于UI框架。 继续改造WorkerTableEx组件，其中该组件仅提供数据（员工、部门及导出时间）以及头部、正文和注脚三个具名插槽： let ajax_data = ref( { workers: [ {id: 1234, sex: true, name: "张三", tel: "13600000000"}, {id: 1235, sex: false, name: "李四", tel: "13600000001"}, {id: 1235, sex: false, name: "王五", tel: "13600000002"}, {id: 1234, sex: false, name: "赵六"} ], department: "技术部", exp_t: "2024年6月27日20:22:37" });//实际开发从应从服务器获取 组件的模板部分： <template> <slot :title="ajax_data.title" name="header"></slot> <slot :workers="ajax_data.workers" name="content"></slot> <slot :exp_t="ajax_data.exp_t" name="footer"></slot> </template> 上述代码使用了具名作用域插槽，将ajax_data的title、workers和exp_t属性分别绑定到三个不同的具名插槽。 则调用者的代码为： <WorkerTableEx> <template #header="parame"> <h3>部门：{{ parame.title }}</h3> </template> <template #footer="parame"> <p>导出时间：{{ parame.exp_t }}</p> </template> <template #content="parame"> <table id="main"> <thead> <tr> <th scope="col">员工号码</th>...
发表评论
