Vue 组件注册实例详解


Posted in Javascript onFebruary 23, 2019

本文实例讲述了Vue 组件注册。分享给大家供大家参考,具体如下:

1 组件名

在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:

Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数。

你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范 中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

你可以在风格指南 中查阅到关于组件名的其它建议。

2 组件名大小写

定义组件名的方式有两种:

使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>

使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name><MyComponentName> 都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

3 全局注册

到目前为止,我们只用过 Vue.component 来创建组件:

Vue.component('my-component-name', {
 // ... 选项 ...
})

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如:

html:

<div id="app">
 <component-a></component-a>
 <component-b></component-b>
 <component-c></component-c>
</div>

js:

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })

在所有子组件中也是如此,也就是说这三个组件在各自内部也都可以相互使用。

4 局部注册

全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件:

new Vue({
 el: '#app'
 components: {
  'component-a': ComponentA,
  'component-b': ComponentB
 }
})

对于 components 对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。例如,如果你希望 ComponentA 在 ComponentB 中可用,则你需要这样写:

var ComponentA = { /* ... */ }
var ComponentB = {
 components: {
  'component-a': ComponentA
 },
 // ...
}

或者如果你通过 Babel 和 webpack 使用 ES2015 模块,那么代码看起来更像:

import ComponentA from './ComponentA.vue'
export default {
 components: {
  ComponentA
 },
 // ...
}

注意在 ES2015+ 中,在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写,即这个变量名同时是:

  • 用在模板中的自定义元素的名称。
  • 包含了这个组件选项的变量名。

5 模块系统

如果你没有通过 import/require 使用一个模块系统,也许可以暂且跳过。如果你使用了,那么我们会为你提供一些特殊的使用说明和注意事项。

5.1 在模块系统中局部注册

如果你还在阅读,说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下,我们推荐创建一个 components 目录,并将每个组件放置在其各自的文件中。

然后你需要在局部注册之前导入每个你想使用的组件。例如,在一个假设的 ComponentB.js 或 ComponentB.vue 文件中:

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
 components: {
  ComponentA,
  ComponentC
 },
 // ...
}

现在 ComponentA 和 ComponentC 都可以在 ComponentB的模板中使用了。

5.2 基础组件的自动化全局注册

可能你的许多组件只是包裹了一个输入框或按钮之类的元素,是相对通用的。我们有时候会把它们称为基础组件,它们会在各个组件中被频繁的用到。

所以会导致很多组件里都会有一个包含基础组件的长列表:

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
 components: {
  BaseButton,
  BaseIcon,
  BaseInput
 }
}

而只是用于模板中的一小部分:

<BaseInput
 v-model="searchText"
 @keydown.enter="search"
/>
<BaseButton @click="search">
 <BaseIcon name="search"/>
</BaseButton>

幸好如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+ ),那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码:

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
 // 其组件目录的相对路径
 './components',
 // 是否查询其子目录
 false,
 // 匹配基础组件文件名的正则表达式
 /Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
 // 获取组件配置
 const componentConfig = requireComponent(fileName)
 // 获取组件的 PascalCase 命名
 const componentName = upperFirst(
  camelCase(
   // 剥去文件名开头的 `'./` 和结尾的扩展名
   fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  )
 )
 // 全局注册组件
 Vue.component(
  componentName,
  // 如果这个组件选项是通过 `export default` 导出的,
  // 那么就会优先使用 `.default`,
  // 否则回退到使用模块的根。
  componentConfig.default || componentConfig
 )
})

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。这里有一个真实项目情景下的示例。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
node.js中的console用法总结
Dec 15 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 #Javascript
Vue自定义属性实例分析
Feb 23 #Javascript
Vue动态组件与异步组件实例详解
Feb 23 #Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 #Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 #Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 #Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 #Javascript
You might like
PHP学习笔记之数组篇
2011/06/28 PHP
YII实现分页的方法
2014/07/09 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
python创建和删除目录的方法
2015/04/29 Python
Python fileinput模块使用实例
2015/06/03 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
详解python中*号的用法
2019/10/21 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python实现磁盘日志清理的示例
2020/11/05 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
《孙权劝学》教学反思
2014/04/23 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
追讨欠款律师函
2015/06/24 职场文书
详解NodeJS模块化
2021/06/15 NodeJs