利用element-ui进行二次封装业务组件过程

业务组件-CheckBox

1.组件说明

下拉框，可以单选或多选

2.Props

参数	说明	类型	可选值	默认值
data	接收父组件v-model的值	String,Array
options	下拉框字典数据源	Array		[ ]
value	下拉框value	String		‘value’
label	下拉框label	String		‘label’
disabled	是否可用,为true表示不可用,false为可用	Boolean		false
isMultiple	是否多选，为true表示多选，false为单选	Boolean		false

3.data

参数	说明	类型	可选值	默认值
selectedData	业务组件自身v-model	array		[ ]

4.Events（子组件 -> 父组件）

事件名	实现方法名	说明	回调参数
change	handleSelectedChange	当选中节点变化时触发，在此主要用于传值给父组件	选中节点的值

实现代码：

methods: {
    handleSelectedChange(val){
        this.$emit('input', val)
    }
} 

4.父子组件相互通信

业务场景：
当处于“查看”记录时，父组件取得后端数据后，将数据传给业务组件，让其在前端展示，这是典型的父传子；
当对该记录进行编辑时，会在前端重新选择下拉框的值，并将重新 选择到的值又返回给父组件，这就是子传父；

解决思路：
组件间的传值，想到的是Props（父传子），再通过$emit（子传父）即满足要求；
父组件除了与业务组件传值，其实它自己本身也需要与自身的data进行传值，因为它还需要取得后端的数据，
且父组件接收到业务组件重新选值后，还需要将新值再返回给后端更新；
那不能在父组件中定义v-model同时满足自已需求，也能传值给到业务组件呢？

实现方法

• 父组件定义v-model

<el-form-item label="测试checkbox复选">
  <checkboxCom v-model="pageForm.multiChecked" :options="personalPlans" value="key" label="text">
  </checkboxCom>
</el-form-item>

• 业务组件重新定义父组件的v-model，用于获取父组件的v-model的值

model: { // 此model内定义的prop默认重新定义父组件v-model中的value属性,变成data属性
      prop: 'data'
      // event: 'change' //也可以重新定义父组件v-model中的input的事件名,变成change事件名
    },
props: {
  // 来自父组件已选中数据；如果是单选，data为String, 如果是复选，则data为Array
  data:[String,Array]//这个与上面的model的prop是一一对应的

• 业务组件获取到父组件值后，需要将其值给到业务组件自己的value

  //业务组件中的template部分
  <el-select v-model="selectedData" :multiple="isMultiple" @change="handleSelectedChange" placeholder="请选择">
    <el-option v-for="(item,index) in options" :key="index" :label="item[label]" :value="item[value]">
    </el-option>
  </el-select>

// 业务组件script部分
// 为啥要设置wathc是因为mounted只会加载一次，当this.data变化时，不会重新加载，所以需要启用到wathc监听
watch: {
  data() {
    this.selectedData = this.data
  }
},
created() {
  this.selectedData = this.data
},

• 业务重新选值后，需要将值再传给父组件

methods: {
    handleSelectedChange(val){
        this.$emit('input', val) // 'input'是父组件v-model中自带的事件名
    }
}