vue自定义组件

前言

在项目开发中，现有的一些ui框架其实是很不错的，但是坑也不少，加上我们的一些业务需求，其实这些框架的功能是不能去实现的，这时候，我们可以结合 Vue 组件化的特性，开发可复用且适合我们业务的组件是很有必要的，以便提高开发效率和质量。

封装组件的步骤

1. 思考这个组件需要实现什么
2. 写写这个组件的基本样式，大致效果是怎样的
3. 实现的基本逻辑是怎样
4. 数据结构、方法以及他们如何传值、暴露
5. 注册、调用

实现什么

实现一个select单选的组件，通过父组件传入待选项，select组件进行选择

通过Prop向子组件传递数据

Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行.当然对 props 传递的参数应该添加一些验证规则；当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
Invalid prop: type check failed for prop "data". Expected Array, got String.

// 子组件
props: {
  data: Array，
  require: true
},
// 父组件
return {
  // prop指定类型后，传入的值也应该是相对应的类型，否则会报错
  data: 'sss',
  selectValue: ''
}

prop类型

String、Number、Boolean、Array、Object

prop类型检测

default、required、自定义验证

通过事件向父级组件发送消息

在组件开发中，要求我们与父组件进行沟通，我们可以调用内建的this.$emit 方法并传入事件的名字，来向父级组件触发一个事件;
子组件通过触发父组件的函数，我们在父组件中监听这个事件，就像原生DOM事件一样
使用事件抛出一个值，用于改变父组件的选中值

// change是触发父组件的函数
this.$emit('change', value)

组件注册

局部注册：

  components: {
    Select
  },

代码

父组件：

子组件：

小作业

在以上select的基础上，增加多选操作