浅入深出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 相关文章推荐
jQuery 表单验证扩展(四)
Oct 20 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
VUE重点问题总结
Mar 19 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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的宝库目录--PEAR
2006/10/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
js输出列表实现代码
2010/09/12 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
应届生会计求职信
2013/11/11 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
医院工作检讨书范文
2014/02/10 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
销售团队口号大全
2014/06/06 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
早恋主题班会
2015/08/14 职场文书
财产分割协议书
2016/03/22 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
高中班主任寄语
2019/06/21 职场文书