自定义组件

但仅有基础组件是不够用的，实际开发中会有很多封装自定义的组件。

优势

• 可以将组件进行任意次数的复用。
• 合理的划分组件，有助于提高应用性能。
• 代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
• 组件化开发能大幅度提高应用开发效率、测试性、复用性等。

注册

在注册一个组件的时候，我们始终需要给它一个名字。 定义组件名的方式有两种：

• 使用 kebab-case

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如  <my-component-name>。

• 使用 PascalCase

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。 也就是说  <my-component-name>  和  <MyComponentName>  都是可接受的。

在小程序工程根目录下的  components  目录，创建并存放自定义组件：

│─components 符合 vue 组件规范的组件目录
│ └─componentA 符合‘components/组件名称/组件名称.vue’目录结构，easycom 方式可直接使用组件
│ └─componentA.vue 可复用的 componentA 组件
│ └─component-a.vue 可复用的 component-a 组件

全局注册

配置全局组件，需在  main.js  里进行全局注册，注册后就可在所有页面里使用该组件。

注意: Vue.component 的第一个参数必须是静态的字符串。

1. main.js  里进行全局导入和注册

import Vue from "vue";
import pageHead from "./components/page-head.vue";
Vue.component("page-head", pageHead);

2. index.vue  里可直接使用组件

<template>
  <view>
    <page-head></page-head>
  </view>
</template>

局部注册

局部注册之前，在需要引用该组件的页面，导入你想使用的组件。

页面引入组件方式

如下通过两种方式导入一个角标的组件库，推荐使用  easycom  方式引入。

1. 传统 vue 规范：  在 index.vue 页面中，通过  import  方式引入组件 ，在  components  选项中定义你想要使用的组件。

<!-- 在index.vue引入 bz-badge 组件-->
<template>
  <view>
    <bz-badge text="1"></bz-badge
    ><!-- 3.使用组件 -->
  </view>
</template>
<script>
import kzBadge from "@/components/bz-badge/bz-badge.vue"; //1.导入组件（这步属于传统 vue 规范，但在小程序的 easycom 下可以省略这步）
export default {
  components: { kzBadge }, //2.注册组件（这步属于传统 vue 规范，但在小程序 的 easycom 下可以省略这步）
};
</script>

对于  components  对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

在对象中放一个类似 kzBadge 的变量名其实是 kzBadge : kzBadge 的缩写，即这个变量名同时是：

• 用在模板中的自定义元素的名称
• 包含了这个组件选项的变量名(仅支持驼峰法命名)

1. 通过 easycom ：  将组件引入精简为一步。只要组件安装在项目的  components  目录下，并符合  components/组件名称/组件名称.vue  目录结构。就可以不用引用、注册，直接在页面中使用。

<!-- 在index.vue引入 bz-badge 组件-->
<template>
  <view>
    <bz-badge text="1"></bz-badge><!-- 3.使用组件 -->
  </view>
</template>
<script>
// 这里不用 import 引入，也不需要在 components 内注册 bz-badge 组件。template 里就可以直接用
export default {
  data() {
    return {};
  },
};
</script>

• easycom 是自动开启的，不需要手动开启，有需求时可以在  pages.json  的  easycom  节点进行个性化设置

• 不管 components 目录下安装了多少组件，easycom 打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件是  vue  技术中非常重要的部分，组件使得与 ui 相关的轮子可以方便的制造和共享，进而使得  vue  使用者的开发效率大幅提升。

不支持

不同意平常 vue 规范，小程序中不支持以下组件

• keep-alive
• transition （可使用 animation 或 CSS 动画替代