浅入深出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 面向对象的之私有成员和公开成员
May 04 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
jQuery中extend函数详解
Feb 13 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
redux.js详解及基本使用
May 24 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP伪造referer实例代码
2008/09/20 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
python动态加载变量示例分享
2014/02/17 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
中学生自我鉴定
2014/02/04 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
护士医德医风自我评价
2014/09/15 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
武侯祠导游词
2015/02/04 职场文书
小班下学期个人总结
2015/02/12 职场文书
管理失职检讨书范文
2015/05/05 职场文书
横空出世观后感
2015/06/09 职场文书
2016情人节宣传语
2015/07/14 职场文书
校长新学期致辞
2015/07/30 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python