我想将三个下拉框变成一个组件 初始是没问题的 下拉福州市可以读取接口获取福州市的几个区 然后选区 查到街道 但是直接传值的时候一次性把三个都传进去导致第一个读取了 后面两个被重置了 一个一个传又破坏了组件整体性该怎么办js代码如下

`

export default {

name: 'AreaSelect',

model: {

prop: 'value',

event: 'change',

},

props: {

value: Object,

},

data () {

return {

citycodeDict: [{

name: '全部',

code: '',

}],

countrycodeDict: [{

name: '全部',

code: '',

}],

towncodeDict: [{

name: '全部',

code: '',

}],

}

},

watch: {

'value.citycode': {

handler: function (nVal) {

if (!nVal) {

this.reset('countrycodeDict', 'countrycode')

this.reset('towncodeDict', 'towncode')

} else {

const id = this.citycodeDict.find(e => e.code === nVal).id

this.init(id, 'countrycodeDict')

this.value.countrycode = ''

this.value.towncode = ''

}

},

},

'value.countrycode': {

handler: function (nVal) {

if (!nVal) {

this.reset('towncodeDict', 'towncode')

} else {

const id = this.countrycodeDict.find(e => e.code === nVal).id

this.init(id, 'towncodeDict')

this.value.towncode = ''

}

},

},

},

created () {

this.init(1, 'citycodeDict')

},

methods: {

init (id, target) {

const data = {

parentId: id || 1,

}

// 获取列表

const _this = this

this.$http({

url: _this.$http.adornUrl('aa/bb/cc'),

method: 'get',

params: data,

}).then(({ data }) => {

if (data && data.code === 200) {

this[target] = [{ name: '全部', code: '' }]

this[target] = this[target].concat(data.data)

}

})

},

reset (valueDict, value) {

this[valueDict] = [

{

name: '全部',

code: '',

},

]

this.value[value] = ''

},

},

}

`

回答

试试这个方案

// data加上一个listen，初始值为true

data:{

cityListen:true;

countryListen:true;

}

// 在if当中加判断，当listen为false时就不清空

"value.citycode": {

handler: function (nVal) {

if (!nVal) {

this.reset("countrycodeDict", "countrycode");

this.reset("towncodeDict", "towncode");

} else {

const id = this.citycodeDict.find((e) => e.code === nVal).id;

this.init(id, "countrycodeDict");

if (this.cityListen) {

this.value.countrycode = "";

this.value.towncode = "";

}else{

this.cityListen = true;

}

}

},

},

"value.countrycode": {

handler: function (nVal) {

if (!nVal) {

this.reset("towncodeDict", "towncode");

} else {

const id = this.countrycodeDict.find((e) => e.code === nVal).id;

this.init(id, "towncodeDict");

if (this.countryListen) {

this.value.towncode = "";

}else{

this.countryListen = true;

}

}

},

}

// 添加赋值的方法，在外部使用ref进行调用

setVal(citycode, countrycode, towncode) {

this.cityListen = false;

this.countryListen = false;

this.value.citycode = citycode;

this.value.countrycode = countrycode;

this.value.towncode = towncode;

},

多谢大佬提供了思路，稍微调整下就行 需要修改下citycodewatch改变时候 的有调用数据库所以会慢点 查询countryDict，这时候 countrycode的watch事件已经完成了 所以需要在调用下 countrycode的watch事件，真的好麻烦 看看后面有没办法优化了

`export default {

name: 'AreaSelect',

model: {

prop: 'value',

event: 'change',

},

props: {

value: Object,

},

data () {

return {

cityFlag: true,

countryFlag: true,

citycodeDict: [{

name: '全部',

code: '',

}],

countrycodeDict: [{

name: '全部',

code: '',

}],

towncodeDict: [{

name: '全部',

code: '',

}],

}

},

watch: {

'value.citycode': {

handler: function (nVal) {

const _this = this

if (!nVal) {

this.reset('countrycodeDict', 'countrycode')

} else {

const id = this.citycodeDict.find(e => e.code === nVal).id

this.init(id, 'countrycodeDict', function () {

if (!_this.cityFlag) {

_this.value.countrycode = ''

} else {

_this.cityFlag = false

_this.countryChange(_this.value.countrycode)

}

})

}

},

},

'value.countrycode': {

handler: function (nVal) {

this.countryChange(nVal)

},

},

},

created () {

this.init(1, 'citycodeDict')

},

methods: {

countryChange (nVal) {

if (!nVal) {

this.reset('towncodeDict', 'towncode')

} else if (!this.cityFlag) {

const id = this.countrycodeDict.find(e => e.code === nVal).id

this.init(id, 'towncodeDict')

if (!this.countryFlag) {

this.value.towncode = ''

} else {

this.countryFlag = false

}

}

},

// 数据库读取数据

init (id, target, callback) {

const data = {

parentId: id || 1,

}

// 获取列表

const _this = this

this.$http({

url: _this.$http.adornUrl('major/common/area'),

method: 'get',

params: data,

}).then(({ data }) => {

if (data && data.code === 200) {

this[target] = [{ name: '全部', code: '' }]

this[target] = this[target].concat(data.data)

if (callback) {

callback()

}

}

})

},

// 重置

reset (valueDict, value) {

this[valueDict] = [

{

name: '全部',

code: '',

},

]

this.value[value] = ''

},

setValue (a, b, c) {

this.cityFlag = true

this.countryFlag = true

this.value.citycode = a

this.value.countrycode = b

this.value.towncode = c

},

},

}`