浅入深出Vue之组件使用


Posted in Javascript onJuly 11, 2019

组件在 vue开发中是必不可少的一环,用好组件这把屠龙刀,就能解决不少问题。

组件是什么

官方的定义:

  • 组件是可复用的 Vue 实例,并且可带有一个名字。

官方的定义已经非常简明了,组件就是一个实例。

如何使用组件

在具体编写组件实例代码前,我们先来如下几个约定:

  • 所有组件基于单文件组件,即一个 .vue文件就是一个组件
  • data 必须为一个函数
  • template 节点下只能有一个子节点

约束不多,但最后两个需要牢记在心。

基于单文件组件的前提下,一个组件的基本构造如下:

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  // 组件的逻辑,数据部分
}
</script>

<style>
 /** 样式定义 **/
</style>

一个单文件组件由三个部分组成:

  1. 页面内容,即视图部分,这部分是对数据的展示
  2. 逻辑,数据定义部分,这部分是定义、控制数据
  3. 样式部分,服务于视图

这三部分会在接下来的章节中一一实践,在本篇中并不会给出具体的实例代码。 本篇更侧重于讲清楚在写组件之前应该要注意的地方。

组件的命名

在这里向跑题的一点是:

  • 不管是前端还是后端还是其他方向,命名一定要重视,并能给出准确的、无歧义的、简洁的命名

命名不仅仅是为了自己维护代码,更多的是为了团队、协作开发以及交流。良好的命名会让你的代码更具可读性,而良好的可读性会让你的代码更具可维护性。综上,希望童鞋们能认真命名,避免在项目中产出类似的命名:

var x = getSomething(y);

var somethingA = getSomethingB();

...

在这里,vue官方是强烈建议遵循 W3C规范去为组件命名的:

  • 字母全小写且分隔符使用连字符(短横线):-

当然你也可以使用Pascal命名:

  • 首字母大写,无分隔符

但是在使用组件时,都是使用的 W3C规范。假设现在你有一个名称为 HelloWorld的组件,那么如何在其他组件中使用:

<hello-world></hello-world>

建议在命名时考虑以下因素:

  • 词要达意,言简意赅,不要长篇大论
  • 避免产生多义性
  • 避免直接机翻中文,很多时候某些特有名词或者是业务中提炼出来的词并不适合直接机翻(机器翻译)。对同一机翻词汇,一百个人心中可能有一百种不同的解释
  • 参考优秀开源项目的命名规范
  • 参考语言/框架所推荐的规范
  • 同一项目中,对于同一个业务知识、名词的翻译尽可能保持一致(同样也是为了避免多义性)

在同一个项目中,尽可能保持统一风格

组件的注册

在另一个组件中如果需要使用其它自定义组件,那首先是需要将组件注册。

而注册分为:

  • 局部注册
  • 全局注册

局部注册

局部注册的用法:

<template>
  <div>
    <!-- 第三步: 在页面中使用 -->
    <hello-world></hello-world>
  </div>
</template>

<script>

// 第一步:引入组件
import HelloWorld from 'your/component/path'

export default {

  // 第二步:在当前组件注册此组件,注册之后才可以在页面中使用
  components: [
    HelloWorld
  ]
}
</script>

上图我们可以看到,在单文件组件中局部注册的使用步骤:

  • 将组件引入
  • 在当前组件中注册,这一步也就体现了局部二字,因为注册后的作用域仅在当前组件内。
  • 在视图中使用

全局注册

如果这个 HelloWorld组件是经常要用的一个 UI组件怎么办,如果使用局部注册那意味着每个组件中都将存在第一步和第二步的重复代码。

看见重复代码,我们应该形成一种想要干掉它的本能。因为重复代码属于项目中的坏味道,会让项目的整体质量下降,并且直接影响项目的可维护性和可扩展性。

想想,当这个项目非常庞大,庞大到这个基础组件已经被成百上千个组件引用了,哪天你要改这个组件的文件名或者移动路径时,将是一场灾难。

因此,在 vue中提供了全局注册的办法。只需注册一次,剩余组件中第一步和第二步的代码就可以直接删掉,因为全局注册之后可以直接在视图中使用。

// main.js 入口文件,在创建根实例之前将其注册
import HelloWorld from 'your/component/path'

Vue.component('HelloWorld', HelloWorld)

new Vue({
  ...
})

但是这种手动全局注册单个组件也存在一个问题:

  • 不够自动化,当组件数量繁多时,手动注册组件就又成了一个负担

这里童鞋们可以思考思考如何在 vue中实现自动全局注册组件。

写在后面

组件系统所包含的内容是相当丰富的,三言两语很难说完整,因此这里只提组件最基础的使用和注册以及在实践中会遇到的问题。

下一篇将会详细的说明子组件及在其上进行数据传递的相关知识,同样,也是以理论为主。也是作为基础篇的最后一篇~

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
node.js中的require使用详解
Dec 15 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 #Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 #Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 #Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 #Javascript
ES6的异步终极解决方案分享
Jul 11 #Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 #Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 #Javascript
You might like
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
GWT都有什么特性
2016/12/02 面试题
机械专业毕业生推荐信范文
2013/11/25 职场文书
公司承诺书格式
2014/05/21 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
代领报检证委托书范本
2014/10/11 职场文书
写给医院的感谢信
2015/01/22 职场文书
公证处委托书
2015/01/28 职场文书
工程部部长岗位职责
2015/02/12 职场文书
文言文辞职信
2015/02/28 职场文书