Vue3 插槽技巧
时间:2021-07-11
本文章向大家介绍Vue3 插槽技巧,主要包括Vue3 插槽技巧使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近想着使用Vue3+ElementPlus封装一个后台管理常用的Table组件,设计之初考虑到高自定义性,所以便延伸出以下的代码
使用技术栈:
- Vue3.x
- ElementPlus
- Jsx
Jsx 采用的并不是Vue提供的原生h函数,而是类似React的语法.
npm install @vue/babel-plugin-jsx -D
Link
具体代码如下:
// EasyTable.jsx
import { defineComponent } from "@vue/runtime-core"; import styles from "./EasyTable.module.css"; export default defineComponent({ props: { table: { type: Object, required: true, }, }, setup(props) {}, render() { const { data, tr } = this.table; return ( <div className={styles["base-layout"]}> <Table border data={data}> {tr.map((column) => { return column.template ? ( <TableColumn width={column.width} key={column.id} label={column.label} > {this.$slots[column.template] ? this.$slots[column.template](column) : ""} </TableColumn> ) : ( <TableColumn prop={column.prop} label={column.label} width={column.width} key={column.id} /> ); })} </Table> </div> ); }, });
// Home.vue 使用 <template> <div class="home"> <EasyTable :table="table"> <template v-slot:gender="column"> <div>{{ column.gender ? "女" : "男" }}</div> </template> </EasyTable> </div> </template> <script> import EasyTable from "@/components/EasyTable"; export default { name: "Home", components: { EasyTable, }, data() { return { table: { data: [ { name: "纪晓岚", age: 18, job: "大学士", gender: 0, desc: "目不识丁纪学士", }, { name: "和珅", age: 18, job: "军机大臣", gender: 0, desc: "两袖清风和大人", }, ], tr: [ { label: "姓名", prop: "name", width: "180", }, { label: "年龄", prop: "age", width: "180", }, { label: "性别", width: "180", template: "gender", }, { label: "特征", prop: "desc", }, ], }, }; }, methods: { onClick() { alert("Hello World"); }, }, }; </script>
原文地址:https://www.cnblogs.com/alone4436/p/14999737.html
- 3298: [USACO 2011Open]cow checkers
- 3433: [Usaco2014 Jan]Recording the Moolympics
- 3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者
- 3391: [Usaco2004 Dec]Tree Cutting网络破坏
- 3404: [Usaco2009 Open]Cow Digit Game又见数字游戏
- GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理
- 3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队
- 3409: [Usaco2009 Oct]Barn Echoes 牛棚回声
- 浅谈webp
- 3385: [Usaco2004 Nov]Lake Counting 数池塘
- 2761: [JLOI2011]不重复数字(平衡树)
- 无图片字体icon
- 数据结构(三):栈与队列
- 3555: [Ctsc2014]企鹅QQ
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS 7中Nginx日志定时拆分实现过程详解
- 浅谈linux模拟多线程崩溃和多进程崩溃
- Linux下MongoDB的安装和配置教程
- Linux配置实现免密钥登录过程解析
- 可以提高效率的十个Linux命令别名汇总
- 基于linux命令提取文件夹内特定文件路径
- Ubuntu20.04修改ip地址的方法示例
- Linux 逻辑卷管理(LVM)使用方法总结
- Linux 下载安装VSCode 使用编程输出当前时间的方法
- 详解Linux获取线程的PID(TID、LWP)的几种方式
- Linux文件基本属性知识点总结
- Linux MySQL忘记root密码解决方案
- 如何使用iostat查看linux硬盘IO性能
- linux搭建NFS文件共享服务器的步骤详解
- Windows和Linux实现远程桌面连接