Vue 可复用组件

1、什么是可复用的UI组件？

在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件。不同于根组件，同一个可复用组件，可以在同一个应用中多次使用。

2、可复用UI组件的创建

可复用组件在构建选项上与全局组件基本一致（除了一些特殊设定，后续会讲）。
可复用组件可以像标签一些在模板中使用，Vue 会在解析过程中处理它们。

2-1、全局定义

Vue.component('组件名称', {
   组件选项})

可以在任意位置（多个不同的 Vue 应用中）使用。

2-2、局部定义

new Vue({
   
  ...,
  components: {
   
  	'组件名称': {
   组件选项}	
	}
})

局部组件只能在其定义的组件内使用，不能在其子组件内部使用。

3、组件内部私有数据（状态）

可复用组件的 data 必须是函数，且该函数必须返回一个对象作为组件最终的 data。

4、组件外部传入数据

如同一个函数一样，函数除了可以定义内部私有变量，有时候为了提高函数的复用性，我们通过会通过参数来接收外部传入的数据。组件也可以。

4-1、props

组件中内部私有数据存储中组件 data 中，通过外部传入的数据，则通过 props 选项接收。

首先，组件内部通过 props 来定义可以接收的数据名称，就像是函数的形参。

然后，在使用该组件的时候可以通过标签属性的方式进行传参（可配合 v-bind 传入表达式）。