基于element-ui框架。这个选择器很多页面都会用到,于是我把他封装成一个组件方便调用。
子组件:
<template>
<el-select
v-model="value"
clearable
:placeholder="myTip"
size="small"
@change="changeSelect()">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
--------------
props:["type","value"],
data () {
return {
options:[],
val:"",
}
},
---------------
methods:{
list:function(){
if(this.type == '年级'){
this.load_grade();
}
},
//加载年级
load_grade:function(){
this.options = [
{
id:'1',
name:"一年级"
},
{
id:'2',
name:"二年级"
},
{
id:'3',
name:"三年级"
}
]
},
//改变选中
changeSelect:function(){
this.val = this.value;
this.$emit('input', this.val);
this.$emit('changeVal', this.val);
},
}
mounted:function(){
this.list();
},
父组件:
<cmsSelect
v-model="value_grade"
type="年级"
style="width: 140px;"
@changeVal="changeVal">
</cmsSelect>
当我改变这个选择器的时候,值拿到了,但是报了一个错
这是什么原因呢?
首先,这是个警告不是一个错误,警告信息大概意思就是“避免定义名称为value的props,因为他可能被父组件自动重写掉,建议自己定义data或者计算属性”,你定义的"value"可能和vue运行时发生冲突