vue父组件获取子组件页面的数组 以城市三级联动为例
父组件调用子组件
<Cselect ref="registerAddress"></Cselect>
import Cselect from '../../../../components/common/select'
export default {
Cselect
}
父组件页面通过 this.registeraddress就可以获取子组件页面的数据
子组件
<template>
<div>
<el-select v-model="prov" style="width:167px;margin-right: 25px;" :disabled="edit">
<el-option v-for="(option,index) in arr" :value="option.name" :key="index">{{ option.name }}</el-option>
</el-select>
<el-select
v-model="city"
class="margin_left"
style="width:167px;margin-right: 25px;"
:disabled="edit"
>
<el-option
v-for="(option,index) in cityArr"
:value="option.name"
:key="index"
>{{ option.name }}</el-option>
</el-select>
<el-select
v-model="district"
class="margin_left"
v-if="district"
style="width:167px;"
:disabled="edit"
>
<el-option
v-for="(option,index) in districtArr"
:value="option.name"
:key="index"
>{{ option.name }}</el-option>
</el-select>
</div>
</template>
<script>
import area from "./area.js";
export default {
name: "Cselect",
data() {
return {
arr: area.arrAll,
prov: "省份",
city: "城市",
district: "区域",
cityArr: [],
districtArr: [],
edit: false,
iscity:false,
isdistrict:false
};
},
methods: {
updateCity: function() {
this.iscity=false;
for (var i in this.arr) {
var obj = this.arr[i];
if (obj.name) {
if (obj.name == this.prov) {
this.cityArr = obj.sub;
break;
}
}
}
if (
this.cityArr &&
this.cityArr.length > 0 &&
this.cityArr[1].name
) {
for (var i in this.cityArr) {
var obj = this.cityArr[i];
if (obj.name == this.city) {
this.city = obj.name;
this.iscity=true;
break;
}
}
if(!this.iscity){
this.city = this.cityArr[1].name;
}
} else {
this.city = "城市";
}
},
updateDistrict: function() {
var i = 1;
this.isdistrict=false;
for (var i in this.cityArr) {
var obj = this.cityArr[i];
if (obj.name == this.city) {
this.districtArr = obj.sub;
break;
}
}
if (
this.districtArr &&
this.districtArr.length > 0 &&
this.districtArr[1].name
) {
for (var i in this.districtArr) {
var obj = this.districtArr[i];
if (obj.name == this.district) {
this.district = obj.name;
this.isdistrict=true;
break;
}
}
if(!this.isdistrict){
this.district = this.districtArr[1].name;
}
}
}
},
beforeMount() {
this.updateCity();
this.updateDistrict();
},
watch: {
prov: function() {
this.updateCity();
this.updateDistrict();
},
city: function() {
this.updateDistrict();
}
}
};
</script>
