浅入深出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的动态表格插件
Mar 28 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
纯JS实现简单的日历
Jun 26 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
浅谈vue权限管理实现及流程
Apr 23 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中定义网站根目录的常用方法
2010/08/08 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JSON格式化输出
2014/11/10 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python求质数列表的例子
2019/11/24 Python
python Shapely使用指南详解
2020/02/18 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python项目跨域问题解决方案
2020/06/22 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
Python中Selenium库使用教程详解
2020/07/23 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
业务员岗位职责
2013/11/16 职场文书
高中军训感言800字
2014/03/05 职场文书
关于青春的演讲稿
2014/05/05 职场文书
Python打包为exe详细教程
2021/05/18 Python
Python合并多张图片成PDF
2021/06/09 Python