vue全局组件自动注册

组件的目录结构：

子组件的name必须写

自动全局注册：
1.要新建个global文件夹，里面的js文件是对各个子组件的导入导出操作。

2.components下新建index.js文件
index.js对global下各个导出的组件进行全局自动注册操作。

3.main.js入口文件引用components文件夹

到此就注册完毕了
使用：
刚才说到子组件name必写，页面中使用时对应的子组件name是什么，vue页面中就写什么便签。
就第一张图片的button.vue子组件来说，它的name是 Button , 所以页面中的标签名称也是它：<Button></Button>，如图：

效果：

关于如何封装组件请看我的其他文章，Thanks♪(･ω･)ﾉ

vue全局组件自动注册相关推荐

vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...
Vue - 全局组件之间传值（中间件传值）
Vue项目中全局组件之间传值(中间件传值) 一. 使用方法二. 传值实例一. 使用方法创建一个中间件文件,文件名自定义这里创建的文件为 send.js send.js 中配置 import V ...
vue 简单实现组件自动注册
1.应用场景: vue 项目中,需要在某个页面上引用某一类组件时,这一类组件存在于相同的文件夹,并且需要在页面进行动态的组件绑定 2.设计思路 2.1 组件使用 <component :is=& ...
自定义vue全局组件use使用
自定义一个全局Loading组件,并使用: 总结目录: |-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading ...
Vue 全局组件-卡片型盒子组件
首先上效果图表单外部类似卡片的圆角矩形即本卡片型盒子组件在所有vue页面中可直接使用,无需再单独进行引入组件编写 <template><div class="basi ...
vue父组件自动执行子组件事件
父组件 <child ref="childRef"></child> mounted(){this.$ref.childRef.childEvent(); ...
vue全局组件与局部组件
vue之组件注册，组件切换，组件传值
组件注册全局组件: 全局组件创建第一种方法: js: // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', {data: fun ...
mini-vue之组件的实现和渲染流程以及局部和全局组件建立的联系
实现组件 vue的diff算法 Vue中,一般一个项目只有一个根组件,也就是 new Vue产生的app. 但是一个页面不可能只由一个组件构成,很明显我们需要实现自定义组件. vue中提供了两种自定义 ...
【vue】组件以及父子组件通信
目录: 一. 认识组件化 1.1. 什么是组件化? 1.2. Vue的组件化二. 注册一个组件 2.1. 注册全局组件 2.2. 组件的名称 2.3. 注册局部组件三. Vue的开发模式 3.1. ...

vue全局组件自动注册

vue全局组件自动注册相关推荐

最新文章

热门文章