使用了element ui。看文档可以用$on与$emit模拟双向绑定。但是似乎失败了。。两天了没解决,心好累。。
组件代码
<el-col :span="5">
<el-select v-model="provinceValue" placeholder="请选择" filterable @change="testChange">
<el-option
v-for="item in provinceOptions"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
methods: {
testChange(val){
this.$emit('testChange',val);
}
}
2.父级代码
<vue-address :provinceValue=provinceValue
:cityValue=cityValue
@testChange="testChange2">
</vue-address>
import vueAddress from 'src/components/address'
components: {
vueAddress
},
data: function() {
return {
provinceValue:'全国',
cityValue:''
}
},
methods: {
testChange2(val){
this.provinceValue=val;
}
}
最后在父级点击组件依旧是
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "provinceValue"
组件代码:
应该这样写
父组件:
原因:vue中$emit的写法并不支持驼峰,只能是全部小写,或者在分隔的地方用-