其實很簡單

<!--封裝部門選擇的插件 需要的組件 子組件--> <template><el-select :value="value" placeholder="請選擇所屬部門" @change="handleChange"><el-optionv-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>

該組件封裝我認為是比較失敗的 這是初期所做 想想這就是成長吧

總結

以上是生活随笔為你收集整理的工作172：自己工作开始封装的一个小组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。