前端工作小结57-自己工作开始封装的一个小组件

<!--封装部门选择的插件 需要的组件 子组件-->
<template>
  <el-select  :value="value" placeholder="请选择所属部门" @change="handleChange">
    <el-option
        v-for="department in departments"
        :key="department.value"
        :label="department.label"
        :value="department.value"
    >
    </el-option>
  </el-select>
</template>
 
<script>
import { getAction } from "@/api";
export default {
  name: "SelectForm",
  /*用于和父组件通信*/
  props: {
    value: { type: String, require: true }
  },
  model: {
    event: "change",
    prop: "value"
  },
  data() {
    return {
      /*存储部门的数据*/
      departments: []
    };
  },
  created() {
    /*请求方法*/
    this.load();
  },
  methods: {
    load() {
      /*请求接口的方法*/
      getAction("/department/list").then(res => {
        this.departments = res.data;
      });
    },
    /*方法调用*/
    handleChange(val) {
      this.$emit("change", val);
    }
  }
};
</script>
 
<style scoped></style>

该组件封装我认为是比较失败的 这是初期所做 想想这就是成长吧