浅入深出Vue之组件使用

前端  /  管理员 发布于 4年前   189

组件在 vue开发中是必不可少的一环，用好组件这把屠龙刀，就能解决不少问题。

组件是什么

官方的定义：

• 组件是可复用的 Vue 实例，并且可带有一个名字。

官方的定义已经非常简明了，组件就是一个实例。

如何使用组件

在具体编写组件实例代码前，我们先来如下几个约定：

• 所有组件基于单文件组件，即一个 .vue文件就是一个组件
• data 必须为一个函数
• template 节点下只能有一个子节点

约束不多，但最后两个需要牢记在心。

基于单文件组件的前提下，一个组件的基本构造如下：

一个单文件组件由三个部分组成：

1. 页面内容，即视图部分，这部分是对数据的展示
2. 逻辑，数据定义部分，这部分是定义、控制数据
3. 样式部分，服务于视图

这三部分会在接下来的章节中一一实践，在本篇中并不会给出具体的实例代码。 本篇更侧重于讲清楚在写组件之前应该要注意的地方。

组件的命名

在这里向跑题的一点是：

• 不管是前端还是后端还是其他方向，命名一定要重视，并能给出准确的、无歧义的、简洁的命名

命名不仅仅是为了自己维护代码，更多的是为了团队、协作开发以及交流。良好的命名会让你的代码更具可读性，而良好的可读性会让你的代码更具可维护性。综上，希望童鞋们能认真命名，避免在项目中产出类似的命名：

var x = getSomething(y);var somethingA = getSomethingB();...

在这里，vue官方是强烈建议遵循 W3C规范去为组件命名的：

• 字母全小写且分隔符使用连字符(短横线)：-

当然你也可以使用Pascal命名：

• 首字母大写，无分隔符

但是在使用组件时，都是使用的 W3C规范。假设现在你有一个名称为 HelloWorld的组件，那么如何在其他组件中使用：

建议在命名时考虑以下因素：

• 词要达意，言简意赅，不要长篇大论
• 避免产生多义性
• 避免直接机翻中文，很多时候某些特有名词或者是业务中提炼出来的词并不适合直接机翻（机器翻译）。对同一机翻词汇，一百个人心中可能有一百种不同的解释
• 参考优秀开源项目的命名规范
• 参考语言/框架所推荐的规范
• 同一项目中，对于同一个业务知识、名词的翻译尽可能保持一致（同样也是为了避免多义性）

在同一个项目中，尽可能保持统一风格

组件的注册

在另一个组件中如果需要使用其它自定义组件，那首先是需要将组件注册。

而注册分为：

• 局部注册
• 全局注册

局部注册

局部注册的用法：

上图我们可以看到，在单文件组件中局部注册的使用步骤：

• 将组件引入
• 在当前组件中注册，这一步也就体现了局部二字，因为注册后的作用域仅在当前组件内。
• 在视图中使用

全局注册

如果这个 HelloWorld组件是经常要用的一个 UI组件怎么办，如果使用局部注册那意味着每个组件中都将存在第一步和第二步的重复代码。

看见重复代码，我们应该形成一种想要干掉它的本能。因为重复代码属于项目中的坏味道，会让项目的整体质量下降，并且直接影响项目的可维护性和可扩展性。

想想，当这个项目非常庞大，庞大到这个基础组件已经被成百上千个组件引用了，哪天你要改这个组件的文件名或者移动路径时，将是一场灾难。

因此，在 vue中提供了全局注册的办法。只需注册一次，剩余组件中第一步和第二步的代码就可以直接删掉，因为全局注册之后可以直接在视图中使用。

// main.js 入口文件，在创建根实例之前将其注册import HelloWorld from 'your/component/path'Vue.component('HelloWorld', HelloWorld)new Vue({  ...})

但是这种手动全局注册单个组件也存在一个问题：

• 不够自动化，当组件数量繁多时，手动注册组件就又成了一个负担

这里童鞋们可以思考思考如何在 vue中实现自动全局注册组件。

写在后面

组件系统所包含的内容是相当丰富的，三言两语很难说完整，因此这里只提组件最基础的使用和注册以及在实践中会遇到的问题。

下一篇将会详细的说明子组件及在其上进行数据传递的相关知识，同样，也是以理论为主。也是作为基础篇的最后一篇~

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家的支持。

您可能感兴趣的文章:

• vue如何引用其他组件（css和js）
• Vuejs第九篇之组件作用域及props数据传递实例详解
• 详解vue2父组件传递props异步数据到子组件的问题
• vue-dialog的弹出层组件
• Vue2实现组件props双向绑定
• vue之父子组件间通信实例讲解(props、$ref、$emit)
• 详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
• Vue-Router来实现组件间跳转的三种方法
• vue mounted组件的使用
• vue组件 $children,$refs，$parent的使用详解