vue中另类封装

2024-07-15 19:56| 来源: 网络整理| 查看: 265

在讲解render函数封装前，扩展一下组件自动全局注册的方法

先看看文件的结构

接下来就是注册代码（即lib下的index.js代码）

export default { install(Vue) { // 读取components文件夹下的文件 // const req = require.context('路径','是否读取子文件夹','正则匹配') // req是一个函数，该函数有三个属性分别是resolve、keys、id // 下面进行详细说明这三个属性 const req = require.context("@/components", false, /\.vue$/); //拿到读取文件的路径 //导入处理 req.keys().forEach((item) => { const com = req(item).default; // 全局注册组件 Vue.component(com.name, com); }); }, };

接下来我们在App文件直接使用components下的组件

export default { name: "", data() { return { flag: false, }; }, computed: {}, methods: {}, };

resolve：它是一个函数，接收一个参数（这个参数是匹配文件的相对路径），返回值是匹配文件相对于项目的路径

keys：它也是一个函数，返回的是匹配成功文件的相对路径（不包括文件名称）

id：返回的是一个字符串，匹配的文件夹的路径（）、匹配规则等

resolve: ./src/components/a.vue keys: (2) ['./a.vue', './b.vue'] id: ./src/components sync \.vue$ render函数封装

下面封装以面包屑为例

在a.vue下定义组件

export default { name: "BreadcrumbItem", props: { to: { type: [Object, String], default: "", }, }, };

在b组件进行封装

export default { name: "Breadcrumb", // 开启函数组件模式，它内部的东西不是响应式，并且没有生命周期 functional: true, render: (h, context) => { //创建数组接收虚拟节点 const vnodeArr = []; context.slots().default.forEach((item, index, arr) => { // 将处箭头外的虚拟dom存储起来 vnodeArr.push(item); // 判断是不是最后一项，是最后一项就不要加箭头 if (arr.length - 1 !== index) { // 加上箭头虚拟节点 vnodeArr.push(h("i", { class: "el-icon-arrow-right" })); } }); // render作用：它会return一个虚拟dom，return什么就渲染相应的实体Dom // h：创建虚拟DOM，有三个参数参数一：标签/组件参数二：虚拟dom配置参数三：虚拟dom/子节点 // h(标签名/组件，{虚拟dom配置}，子集：也是虚拟dom节点信息支持字符串与数组) // 进行渲染，h第三个参数可以为数组 return h("span", {}, vnodeArr); }, };

App组件运用

首页活动列表活动管理活动详情 export default { name: "", data() { return { flag: false, }; }, computed: {}, methods: {}, };

效果图如下

【本文地址】

vue中另类封装

vue中另类封装

今日新闻

推荐新闻