浅入深出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怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
react 项目中引入图片的几种方式
Jun 02 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/07/08 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
js比较日期大小的方法
2015/05/12 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python的面向对象编程方式学习笔记
2016/07/12 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python实现聊天小程序
2018/03/13 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python3字符串输出常见面试题总结
2020/12/01 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
小学岗位竞聘方案
2014/01/22 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
团队会宣传标语
2014/10/09 职场文书
杜甫草堂导游词
2015/02/03 职场文书
党校学习个人总结
2015/02/15 职场文书
教师工作证明范本
2015/06/12 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
七个Python必备的GUI库
2021/04/27 Python