浅入深出Vue之组件使用

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

组件是什么

官方的定义：

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

如何使用组件

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

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

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

<template>  <div>    <!-- 页面内容 -->  </div></template><script>export default {  // 组件的逻辑，数据部分}</script><style> /** 样式定义 **/</style>

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

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

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

组件的命名

在这里向跑题的一点是：

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

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

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

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

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

<hello-world></hello-world>

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

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