浅谈Vue组件及组件的注册方法


Posted in Javascript onAugust 24, 2018

相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,用起来确实很方便,大大减少了我们的开发时间。在一个项目中其实有很多可复用的代码块,如果我们可以把这些内容封装成一个组件就能够很方便的进行各种重复使用。

那么什么是Vue组件呢?它是vue.js最强大的功能之一,是可扩展的html元素,是封装可重用的代码,同时也是Vue实例,可以接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期钩子。

使用组件

组件名大小写

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

使用 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 是有效的。

组件的注册分为全局注册和局部注册

全局注册

我们已经知道创建一个Vue实的方法

new Vue({
 el: '#app',
 //选项
})

注册全局组件可以使用Vue.component(tagName,options)。例如

Vue.component('my-apprvuser',{
 template:'',
 data:function(){
 return{}
 }
 //选项
})

上面是一个最简单的全局注册例子,但是实际上我们并不会这么用。以vue-cli为脚手架工具来说。我们会单独创建一个vue文件来封装一个组件。这里我们创建一个  apprvUser.vue 文件

浅谈Vue组件及组件的注册方法

该文件结构和正常的vue文件一样,里面是我们要封装的组件

然后在我们的main.js文件(也是入口文件)中注册全局组件

//注册审核人(申请)组件
import apprvUser from './views/audit/apprvUser'
Vue.component('my-apprvuser',apprvUser)

这里需要注意引用vue文件的路径不能错,这样在全局注册之后你在其他组件中就能直接使用组件<my-apprvuser></my-apprvuser>,全局注册组件就是这样了。

局部注册

局部注册就是在你想要使用的vue文件中进行注册引入。vue官网api中有一个简单的例子,大家可以看一下,但是实际过程中我们基本上都不会那样用。

还是用上述的  apprvUser.vue 文件来举例。

我是在该文件同级目录下的另一个vue文件中注册该组件的,在export default的一个选项components中进行该组件的注册。

这就是局部组件的注册,在当前文件中就可以使用该组件了,但是在其他组件中不能直接使用该组件。要在其他组件/vue文件中使用该组件必须进行全局或者局部注册。

//注册审核人(申请)组件
import apprvUser from './apprvUser'

export default {
 components: {
 'my-apprvuser':apprvUser
 },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
js实现二级联动简单实例
Jan 11 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
JavaScript中this关键字用法实例分析
Aug 24 #Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 #Javascript
JavaScript原型链与继承操作实例总结
Aug 24 #Javascript
element-ui循环显示radio控件信息的方法
Aug 24 #Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 #Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 #Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 #Javascript
You might like
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHPThumb图片处理实例
2014/05/03 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
php操作mongoDB实例分析
2014/12/29 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
thinkphp分页集成实例
2017/07/24 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
Python验证码识别处理实例
2015/12/28 Python
python中星号变量的几种特殊用法
2016/09/07 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
如何运行带参数的python脚本
2019/11/15 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
介绍一下gcc特性
2015/10/31 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
文明学生事迹材料
2014/01/29 职场文书
销售类求职信
2014/06/13 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
详解如何使用Nginx解决跨域问题
2022/05/06 Servers