VUE中的组件
将页面中重复的的功能抽离出来封装成一个单独的组件，在任何需要的地方使用该组件，这样既减少了 逻辑复杂度 , 又能提高代码的可复用程度和可维护性。
- Vue 中的组件是自定义的标签,可以扩展原生的html元素,封装可重用的代码。
- 一个 自定义标签 Vue 就会把他看成一个组件， 自定义标签原本没有实际意义，但是 Vue 会给这些标签赋予一定的意义。
- 每个组件都是一个 Vue 的实例，那么这个组件也有自己的生命周期，并且也有 data、computed、methods、watch这些属性，每个组件都有自己私有的数据。
组件命名
定义组件名的方式有两种：
1、使用 kebab-case（短横线分隔命名）
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如<my-component-name>。
2、使用 PascalCase（首字母大写命名）
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
自定义组件 & 全局组件 & 局部组件
1、自定义组件：封装后可以在任何地方使用。
（1） 同级新建paymenttips.vue文件和index.js文件。（index.js负责向外边express）
（2）编辑index.js，核心为install属性。
// 导入组件文件
import paymenttips from './paymenttips.vue';
// 定义 PaymentTips 对象
const PaymentTips = {
install: function (Vue) {
Vue.component('PaymentTips', paymenttips)
}
}
export default PaymentTips
只要在index.js里规定了install方法，就可以向其他ui组件库那样，使用Vue.use()来全局使用。
（3）在项目的main.js中引入并用vue.use()注册。
import Vue from 'vue'
// 导入组件文件
import PaymenTtips from "./components/paymenttips";
// 将 paymenttips 注册为全局组件
Vue.use(PaymenTtips)
（4）然后在需要使用的地方直接使用。
<template>
<PaymenTtips></PaymenTtips>
</template>
2、全局组件：可以声明一次在任何地方使用。
（1） 全局组件引入写法：在项目的main.js中声明。
import Vue from 'vue'
// 导入组件文件
import EmptyComponent from './components/empty/emptylayout.vue';
// 将 emptylayout 注册为全局组件
Vue.component('empty-layout', EmptyComponent);
（2）然后在需要使用的地方直接使用。
<template>
<empty-layout></empty-layout>
</template>
使用Vue.component()方法注册全局组件，第一个参数是自定义元素名称，也就是在别的文件中使用这个组件的标签名称，第二个参数是将要注册的 Vue 组件。
实质上与 Vue 自定义组件是一样的，只不过自定义组件多了一对函数，即：Vue.use()和install。
3、局部组件：在需要使用组件的地方使用。
（1）局部组件引入写法：在需要使用组件的demo.vue文件中导入。
// 导入组件文件
import patientPicker from './components/patientpicker/patientpicker.vue'
export default {
components: {
// 注册组件
'patient-picker': patientPicker
},
data() {
return {}
},
methods: {}
}
（2）然后在demo.vue文件中使用。
<template>
<patient-picker></patient-picker>
</template>
注意：局部使用的组件，注册后该组件只在该实例的作用域下有效。
