vue+elementui selet框组件封装 传值

<template>
<el-select v-model="svalue" placeholder="请选择" filterable clearable @change="handleButton">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<!--调用写法 @handleButton='handleButton' handleButton是方法名-->
<!--<xdh-select :dictType="'IT-BU-0002'" v-model="form.inter_options_value" @handleButton="handleButton"></xdh-select>-->
<script>
import axios from 'axios';
import {platform} from '@/api/address';
export default {
name: 'XdhSelect',
data() {
return {
options:[],
svalue: this.value
}
},
props: {
dictType: {
type:String
},//请求的码表值
value: {
type: String
}//接受外部v-model传入的值
},
methods: {
// 获取下拉框数据
getDictionary_option(dictType){
this.options = JSON.parse(localStorage.getItem("dictList"))[dictType].obj;
/*let temp = [];
let that= this;
return axios({
method: 'get',
url: platform + 'platform/application/dict/common/findByDictType?dictType='+dictType
}).then(function (res) {
let error = ""
if(res.data.code == 0){
let tempData = res.data.result
for (let i in tempData){
let test = {};
test ={ value:i,label:tempData[i]}
temp.push(test)
}
}else{
error = res.data.msg
}
return new Promise((resolve, reject)=>{
if (error !== ''){
reject(error)
return
}
that.options = temp;
resolve(temp)
})
});*/
},
// 下拉框点击事件
handleButton(){
/* 子组件通过事件发射向父组件传递事件及参数,$emit即为发射事件
第一个参数为向父组件传递的事件名,第二个参数为向父组件传递的参数 */
this.$emit( 'handleButton', this.svalue);
}
},
watch:{
//判断下拉框的值是否有改变
value(val) {
this.svalue = val;//②监听外部对props属性result的变更,并同步到组件内的data属性myResult中
},
svalue(val, oldVal){
if(val!=oldVal) {
this.$emit("input", val);//③组件内对myResult变更后向外部发送事件通知
}
}
},
mounted(){
// this.svalue=this.value;//初始话下拉框的值
this.getDictionary_option(this.dictType);
}
}
</script>