前面小节我们讲过 组件，一些常用组件的。像<view></view>、<text></text>这类的基础组件，我们可以直接使用，不需要提前定义，因为这些是系统帮我们预设好的。

但是这些系统预设的基础组件不能满足我们所有的开发需求，在 项目中，我们可以根据项目的开发需求去组件。

那如何去创建组件并且引用呢？其实有开始和结束都可以理解为组件，下面我们来具体了解一下自定的组件的创建与引用。

在 项目中，我们可以通过HBuilder 开发者工具新建后缀名为 .vue 的，个 .vue 中创建组件。

后面将该组件通过 import 的方式导入，再在 components 中进行就可以像基础组件一样使用了。

打开 HBuilder 开发者工具，之前创建过的项目会打开。在前面小节中我们创建过 imoocProjects 项目，就会出现在 HBuilder 开发者工具中的左侧。

展开项目目录，右键点击 components 夹，选择新建组件。

勾选创建同名目录，将组件命名为 login。

点击创建， components 夹下面会出现名为login的夹，下面有login.vue，我们打开这个，系统会认帮我们创建以下。

实例：

<template>
  <view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
      };
    }
  }
</script>

<style>

</style>

这样的组件就创建好了，目前这个组件还是空的，没有实质上的，为了方便大家更好的去了解组件，我们来模拟实际开发过程中的例子，定义一下组件的。

模拟实际的业务场景：假设我们想做有权限的应用，部面需要后才能查看，点击这些时，需要弹出弹窗方便。如果在每个都写弹窗，会大大降低应用的可维护性，这时弹窗就有了用武之地。

我们只需要来弹窗组件，到时在中直接这个组件就可以了。

<template>
  <view>
    <view class="modal-mask"></view>
    <view class="modal-dialog">
      <view class="modal-content">
        <p>网wiki</p>
      </view>
      <button>授权</button>
    </view>
  </view>
</template>

<style>
.modal-mask {
  width: ;
  height: ;
  position: fixed;
  top: ;
  left: ;
  background: black;
  opacity: ;
  z-index: ;
}
.modal-dialog {
  width: rpx;
  position: fixed;
  z-index: ;
  background: #ffffff;
  margin: -rpx rpx;
  border-radius: rpx;
}
.modal-content {
  display: flex;
  padding: rpx rpx rpx rpx;
  font-size: rpx;
  justify-content: center;
}
button {
  background:#feb600;
}
</style>

该组件我们只定义了结构和样式，逻辑会在组件引用的时候定义，所以没有在 <script> 中定义逻辑，这个根据实际开发需求来就可以了。

上面我们做了弹窗，如果想要将弹窗出来，就需要先引入组件。

比如我们想在弹窗，就需要在 pages/index/index.vue 中引入 login.vue 这个组件，下面我们来操作一下。

在 pages/index/index.vue script 下面引入并组件。

<script>
  //引入组件
  import Login from "components/login/login.vue"
  export default {
    //组件
    components: {
      Login
    }
  }
</script>

在 template 下面使用组件

<template>
  <view>
    <!-- 使用组件 -->
    <Login></Login>
  </view>
</template>

点击工具栏–运行–运行到内置浏览器，出现下面的，说明我们的组件创建并使用成功了。

到了这一步就算完成了组件的创建和引用。但有时明明成功引用了组件，但是组件却没有出来，并且也没有报错。

这种情况往往是因为新创建的组件没有被重新编译，大多数情况下，重启编译器组件就可以正常了。

使用组件可以让我们更加灵活的进行项目开发，组件可以理解为项目的个零件，我们通过组装这些零件来完成项目的开发。

在组件中，我们可以根据项目需求定义自己的和，所以组件适应的业务场景很广泛。善用组件进行开发，使我们的项目复用性更高、可维护性更强并且降低了组件之间重复性。

跟着本小节的学习，我们模拟了实际的业务场景，创建了登陆弹窗组件，并且在中引用出组件。主要了解了如何创建并引用 组件，本节课程需要掌握的知识点如下：

掌握如何在 HBuilder 开发者工具中创建组件，并理解如何在组件中填充；

了解并掌握怎样引入并组件，将组件中的在中。