浅入深出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 相关文章推荐
Js 中debug方式
Feb 07 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jQuery动态添加
Apr 07 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
vue中实现高德定位功能
Dec 03 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
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设计模式之命令模式的应用详解
2013/05/21 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
python实现数独算法实例
2015/06/09 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
Python操作json的方法实例分析
2018/12/06 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
避暑山庄导游词
2015/02/04 职场文书
python实现图片批量压缩
2021/04/24 Python
js判断两个数组相等的5种方法
2022/05/06 Javascript