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 传入表达式）。
注意事项

如果传入的 props 值为一个表达式，则必须使用 v-bind
组件中的 data 和 props 数据都可以通过组件实例进行直接访问
data 中的 key 与 props 中的 key 不能冲突

5、组件通信
5-1、作用域隔离
为了保证数据安全性（传入的数据通常会在其它组件中也有使用），Vue 不推荐我们在组件内部直接修改传入的数据。
5-2、父组件到子组件内部的数据传递
父组件通过上述提到的 props 向一个子组件内部传递数据。
5-3、子组件内部到外部的数据传递
5-3-1、$emit()
vue 为每个组件对象提供了一个内置方法 $emit ，它等同于自定义事件中的 new Event,trigger 等
this.$emit('自定义事件名称', 事件数据)



事件数据就是中触发事件的同时携带传递的数据 - event


父级在使用该组件的过程中，可以通过 @事件名称 来注册绑定事件函数


事件函数的第一个参数就是事件数据


5-4、数据双向绑定
虽然并不推荐在组件内部修改 props ，但是，有的时候确实希望组件内部状态变化的时候改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目的，不过过程会比较繁琐，vue 提供了一些操作来简化这个过程。
5-4-1、v-model
v-model 是 vue 提供的一个用于实现数据双向绑定的指令，用来简化 props 到 data，data 到 props 的操作流程。
5-4-1-1、model 选项
prop 指定要绑定的属性，默认是 value
event 指定要绑定触发的事件，默认是 input 事件
5-4-2、.sync
通过 v-model 来进行双向绑定，会给状态维护带来一定的问题，因为修改比较隐蔽，同时只能处理一个 prop 的绑定，我们还可以通过另外一种方式来达到这个目的。
5-4-2-1、update:[prop]
这里事件名称要使用 update 加上 prop 名称 的格式
5-5、ref 与 $refs
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。
6、插槽
默认情况下，组件模板解析后会替换整个组件内容，如果我们想在组件引用被包含的内容，可以通过 vue 提供的内置组件 slot 来获取。
6-1、slot
Vue 提供了一个内置的组件 <slot>，用于在组件模板内定义插槽。解析过程中，会被该组件嵌套的子组件（元素）对应的内容所替换。
6-2、具名插槽
使用内置组件 template 与 v-slot 指令进行配置，用来命名插槽，在组件模板中，通过 <标签 v-slot:插槽名称> 来使用。

插槽名称默认为 default ，可以省略。

6-3、作用域插槽
组件内部与组件包含的内容属于不同的作用域（被包含的内容是组件父级下的作用域）。
组件到父级作用域下的子级通信。

组件内部通过 slot 的 attributes 进行数据传递。
子级通过 v-slot 指令的值进行接收。

// 组件内部
<slot v-for="user of users" :user="user"></slot>

// 组件外部子级
<template v-slot:default="data">
  <p>用户的姓名: {{data.user.username}}</p>
</template>

7、props 验证
组件的 props 就是组件的参数，为了确保传入的数据在可控的合理范围内，我们需要对传入的 props 的值类型进行必要的验证。
Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

8、其它 props 相关知识点
8-1、非 prop 特性
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性，这些 props 会被自动添加到组件的根元素上。
8-2、替换/合并已有的特性
默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）。
8-3、禁用特性继承
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false，我们可以通过组件的 this.$attrs 来获取这些属性。

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

封装原生html复用组件
写好的组件页面用object或者iframe这两个标签中任意一个引入即可；
<object class="obj" data="./test.html"></object>

// frameborder 引入组件的边框
<iframe class="obj1" src="./test.html" frameborder="0"></iframe>

在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
Vue 组件的 API 来自三部分 - props, events 和 slots ：


Props 允许外部环境传递数据给组件


Events 允许组件触发外部环境的副作用


Slots 允许外部环境将额外的内容组合在组件中。


使用 v-bind 和 v-on 的简写语法，模板的缩进清楚且简洁：
<my-component
  :foo="baz"
  :bar="qux"
  @event-a="doThis"
  @event-b="doThat"
>
  <img slot="icon" src="...">
  <p slot="main-text">Hello!</p>
</my-component>

前言
大多数前端框架都提供了组件化的能力，在日常开发中，我们经常会用组件去封装自己的业务逻辑，那么如何去写一个复用率高的组件就变成了一个重要的技巧。这里总结一下在使用Vue时几种复用组件的方式。
场景
表单验证是一个经常碰到的场景，表单内的不同组件常常需要有相同的验证逻辑，比如验证值非空，这里就按照这个场景来举几个例子。
使用Mixin
Vue提供了 “混入” 这个方案来达到一个复用的效果，所以我们可以写一个表单校验相关的mixin，并且混入到各个组件中去。
// validate-mixin.js
const validateMixin = {
    props: {
        required: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        validate(value) {
            if (this.required && (value === undefined || value === null || value === '')) {
                this.isError = true;
            } else {
                this.isError = false;
            }
        }
    }
};
export default validateMixin

然后我这边有两个组件，分别是文本输入框和数字输入框
// input.js
<template>
    <div id="ka-input">
        <input type="text" @input="onInput">
        <p v-show="isError" class="err-msg"> {{errMsg}} </p>
    </div>
</template>

<script>
import validateMixin from '@/common/mixin/validate-mixin.js'

export default {
    name: 'KaInput',
    mixins: [validateMixin],
    methods: {
        onInput(e) {
            this.validate(e.target.value);
        }
    },
    data() {
        return {
            isError: false,
            errMsg: '不能为空'
        };
    }
};
</script>


// number-input.js
<template>
    <div id="ka-number-input">
        <input type="number" @input="onInput">
        <p v-show="isError" class="err-msg"> {{errMsg}} </p>
    </div>
</template>

<script>
import validateMixin from '@/common/mixin/validate-mixin.js'

export default {
    name: 'KaNumberInput',
    mixins: [validateMixin],
    methods: {
        onInput(e) {
            this.validate(e.target.value);
        }
    },
    data() {
        return {
            isError: false,
            errMsg: '不能为空'
        };
    }
};
</script>



混入的优点在于使用简单，将共同的属性或者方法封装在这个mixin对象之中，其他需要共享该属性或者方法的组件只要引入这个mixin即可。

但是从上述代码中可以看出，混入有几个明显的缺点。

模板的内容需要维护在各个组件当中,得不到复用。
属性和方法放在mixin中，后期不方便他人维护，需要手动梳理源组件和混入对象之间的逻辑。
mixins会导致属性冲突，并且相同名称的生命周期会被合并，这可能带来冗余的逻辑，同时也可以看出mixin的侵入性较强。

实际上在开发过程中，如何组织mixin的目录结构也是个问题，要区分是一个页面级别的mixin，还是部分页面的mixin，甚至是全站的mixin，划分不清楚会导致后期mixin的职能混乱，不利于代码维护。
RenderLess
renderLess 本意就是不渲染内容的组件，在Vue 中我们可以使用插槽来实现，和React中的HOC有异曲同工之妙。
// validate-render-less.vue
<template>
    <div class="validate-item">
        <slot name="wrapped" :validate="validate"></slot>
        <p v-show="isError" class="err-msg">{{ errMsg }}</p>
    </div>
</template>
<script>
export default {
    data: () => {
        return {
            isError: false,
            errMsg: 'can not be null'
        };
    },
    props: {
        required: {
            type: Boolean,
            required: false
        }
    },
    methods: {
        validate(e) {
            const value = e.target.value;
            if (
                this.required &&
                (value === undefined || value === null || value === '')
            ) {
                this.isError = true;
            } else {
                this.isError = false;
            }
        }
    }
};
</script>


上面这个模块本质上是一个vue组件，他有模板，有逻辑，并且利用插槽在模板中预留了一个“占位符”，其他组件可以往这里添加自己的内容。
// input.js
<template>
    <div id="ka-input">
        <r-l-validate :required="required">
            <template v-slot:wrapped="{ validate }">
                <input type="text" @input="validate($event)" />
            </template>
        </r-l-validate>
    </div>
</template>

<script>
import validate from '@/common/render-less/validate.vue';

const kaInput = {
    props: {
        required: {
            type: Boolean
        }
    },
    name: 'ka-input',
    components: {
        'r-l-validate': validate
    }
};

export default kaInput;
</script>


// number-input.js
<template>
    <div id="ka-number-input">
        <r-l-validate :required="required">
            <template v-slot:wrapped="{ validate }">
                <input type="number" @input="validate($event)">
            </template>
        </r-l-validate>
    </div>
</template>

<script>
import validate from '@/common/render-less/validate.vue'

export default {
    name: 'KaNumberInput',
    props: {
        required: {
            type: Boolean,
            required: false
        }
    },
    components: {
        'r-l-validate': validate
    }
};
</script>


使用render-less组件有这么几个优点。

可以复用模板的逻辑，公共的部分都可以提取到renderless中
不会出现命名冲突

简单总结
对于简单的场景，mixin可以解决大部分问题，但是要注意他的一些缺点；其他的场景下，如果需要复用模板，并且组件的逻辑较为复杂，那应该优先考虑使用render-less组件