vue父组件获取子组件页面的数组 以城市三级联动为例

父组件调用子组件

<Cselect ref="registerAddress"></Cselect>

import Cselect from '../../../../components/common/select'

export default {

Cselect

}

父组件页面通过 this.registeraddress就可以获取子组件页面的数据

子组件

<template>

<div>

<el-select v-model="prov" :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"

: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"

: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>