浅入深出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 Array Flatten 与递归使用介绍
Oct 30 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
详解javascript replace高级用法
Feb 17 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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 ajax 分页类代码
2008/11/13 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python感知机实现代码
2019/01/18 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
python关于倒排列的知识点总结
2020/10/13 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书