您现在的位置是：网站首页> 编程资料编程资料

vue中使用render封装一个select组件_vue.js_

2023-05-24 412人已围观

简介 vue中使用render封装一个select组件_vue.js_

使用render封装一个select组件

父组件

 value - {{ value }} ; value2 - {{ value2 }}  value: '', // 默认值为空字符串 value2: 'area1', optionData: [ { label: '区域1', value: 'area1' }, { label: '区域2', value: 'area2' } ],

Select.vue

效果

在这里插入图片描述

vue另类封装--render函数封装

在讲解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下的组件