在開發(fā)項(xiàng)目中，發(fā)現(xiàn)表單上有很多el-selected組件滚朵，于是冤灾，倒不如把它封裝起來，減少代碼量始绍，可以實(shí)現(xiàn)復(fù)用瞳购。

SelectedPackage組件：

<template>
    <div>
        <el-select
                v-if="selectedData.type==='select'"
                v-model="selectedValue"
                :multiple="selectedData.multiple"
                collapse-tags
                clearable
                :disabled="selectedData.isDisabled"
                :placeholder="selectedData.placeholder"
                @change="changeHandle"
        >
            <el-option
                    v-for="item in selectedData.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.isDisabled"
            />
        </el-select>
    </div>
</template>

<script>
    export default {
        name: "SelectedPack",
        props: {
            selectedData: {
              type: Object,
              required: true
            }
        },
        // watch: {
        //     selectedValue: {
        //         handle(newVal,oldVal){
        //             this.$emit('selectedValue',newVal)
        //         }
        //     }
        // },
        data() {
            return {
                selectedValue: '', // 選擇的值
            }
        },
        methods: {
            changeHandle(val) {
                this.$emit('selectedValue',val)
            }
        }
    }
</script>

<style scoped>

</style>

在父組件中的引用：

<selected-pack :selectedData="selectedData" @selectedValue="getSelectedValue"></selected-pack>

data(){
  return{
    selectedData: {
                    type: 'select',
                    value: 'huaian',
                    multiple: false,
                    isDisabled: false,
                    placeholder: '請選擇',
                    options: [
                        {name: '上海', value: 'shanghai'},
                        {name: '北京', value: 'beijing'},
                        {name: '淮安', value: 'huaian'}
                    ]
                }
  }
},
methods：{
   getSelectedValue(val) {
              this.$notify.info({
                  message: val
              })
            }
}

好啦，這樣就可以實(shí)現(xiàn)復(fù)用了：

效果圖：

圖片.png