自定义组件
- 组件是视图层的基本组成单元。
- 组件是一个单独且可复用的功能模块的封装。
- 一个组件包括开始标签和结束标签，标签上可以写属性，并对属性赋值。内容则写在两个标签之内。
- 根节点为
，这个下只能且必须有一个根 - 一个组件的 data 选项必须是一个函数。
{{userName}}
基础组件是内置在uni-app框架中的，包括view、text、input、button、video等几十个基础组件，列表详见：uni-app基础组件
但仅有基础组件是不够用的，实际开发中会有很多封装的组件。
优势
- 可以将组件进行任意次数的复用。
- 合理的划分组件，有助于提高应用性能。
- 代码更加方便组织和管理，并且扩展性也更强，便于多人协同开发。
- 组件化开发能大幅度提高应用开发效率、测试性、复用性等。
uni-app 搭建了组件的插件市场，有很多现成的组件，若下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。uni-app插件市场注册 在注册一个组件的时候，我们始终需要给它一个名字。 定义组件名的方式有两种：
- 使用 kebab-case
- 使用 PascalCase
在uni-app工程根目录下的
components 目录，创建并存放自定义组件：全局注册
uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。注意
Vue.component 的第一个参数必须是静态的字符串。
nvue 页面暂不支持全局组件。
1.main.js 里进行全局导入和注册
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)
2.index.vue 里可直接使用组件
局部注册
局部注册之前，在需要引用该组件的页面，导入你想使用的组件。
页面引入组件方式
1.传统vue规范： 在 index.vue 页面中，通过
import 方式引入组件 ，在 components 选项中定义你想要使用的组件。
对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。
在对象中放一个类似 uniBadge 的变量名其实是 uniBadge : uniBadge 的缩写，即这个变量名同时是：
- 用在模板中的自定义元素的名称
- 包含了这个组件选项的变量名(仅支持驼峰法命名)
2.通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
- easycom是自动开启的，不需要手动开启.
- 不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
uni-app只支持 vue单文件组件（.vue 组件）。其他的诸如：动态组件，自定义render，和
- 这个
prop以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个prop的值来定义一个计算属性：
{{normalizedSize}}
ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的
$refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
//非H5端不支持通过this.$refs.content来获取view实例
hello //支持通过this.$refs.child来获取child-component实例
当
ref 和 v-for 一起用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。关于 ref 注册时间的重要说明：
因为
ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们，它们还不存在！$refs 也不是响应式的，因此你不应该用它在模板中做数据绑定。子组件ref 尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。 访问子组件实例或子元素，通过 ref 为子组件赋予一个 ID 引用，在vue的js中可通过
this.$refs.XXX来获取到组件对象。你已经定义了这个 ref 的组件里，你可以使用：
this.$refs.usernameInput来访问这个示例：
//base-input子组件页面
【自定义组件】允许父级组件通过下面的代码聚焦
//index 父组件页面
注意
非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）自定义事件 .sync 修饰符
当一个子组件改变了一个
prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。
{{title}}
- less
slot 元素作为承载分发内容的出口。它允许你像这样合成组件：
Your Profile
在
{{title}} 当组件渲染的时候，
HTML ：
Your Profile
如果
template 中没有包含一个 
文章图片
自定义组件.png
推荐阅读
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- 列出所有自定义的function和view
- 动态组件与v-once指令
- vue组件中为何data必须是一个函数（）
- (六)Component初识组件
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- vuex|vuex 基础结构
- 自定义MyAdapter
- SwiftUI|SwiftUI iOS 瀑布流组件之仿CollectionView不规则图文混合(教程含源码)