1、应用场景：

vue 项目中，需要在某个页面上引用某一类组件时，这一类组件存在于相同的文件夹，并且需要在页面进行动态的组件绑定

2、设计思路

2.1 组件使用 <component :is=“xxx” ></component>

<component :is="currenComponent" :publicId="publicId" @publicOpen="publicOpen"> </component>

2.2 批量组件注册 require.context()

require.context() 是webpack支持模块批量导入的API，允许接收三个参数

param 1：组件所在文件路径
param 2：是否深度遍历文件夹
param 3：文件后缀名

<script>const cptAll = require.context('@/views/publicForm',true,/\.vue$/)let reqiure_cpts = {}// cptAll.keys() 返回的是匹配到的带有路径的文件名数组 cptAll.keys().forEach(fileName => {// cptAll(fileName) 返回该组件上下文内容let component = cptAll(fileName)// component.default 返回该组件上下文内容请求reqiure_cpts[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = component.default})export default{component:reqiure_cptsdata(){return {currenComponent:"",}},method:{// 逻辑部分}}
</script>

使用注意：

案例注册的组件名默认就是vue文件名
根据需求在逻辑部分处理进行组件切换

本文大概就说到这儿，有问题可以留言，谢谢支持！

vue 简单实现组件自动注册相关推荐

5.VUE简单的组件间传值【父组件向子组件传值；子组件向父组件传值】
父组件向子组件传值父组件使用子组件时通过v-bind:变量的形式将对应的值传给todo-item子组件子组件通过props接收从父组件传来的content参数子组件向父组件传值数据在父组件中 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
基于 TS 的 React 模板项目，集成 eslint sass，采用 StandardJS 代码风格，包含自动注册组件等各项功能，新建项目或 React 学习必备
react-typescript-sass-standard-template 项目简介由于 Create React App 脚手架创建的项目过于简陋,没有集成诸如 eslint 等工具,致使每次 ...
vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
vue 一个组件内多个弹窗_论如何用Vue实现一个弹窗-一个简单的组件实现
前言最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文 ...
vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能
一.vue-seamless-scroll是什么? vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样 ...
vue组件一直注册不了_Vue注册组件命名时不能用大写的原因浅析
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的 ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...

vue 简单实现组件自动注册

1、应用场景：

2、设计思路

2.1 组件使用 <component :is=“xxx” ></component>

2.2 批量组件注册 require.context()

require.context() 是webpack支持模块批量导入的API，允许接收三个参数

使用注意：

vue 简单实现组件自动注册相关推荐

最新文章

热门文章