背景:
线上商城下订单的时候,用户选择存在localstroge中的地址。
父组件:选择地址的页面。selectAdd下的index.vue
子组件:每一个地址。(CheckBox+地址)
要实现只能选择一个地址确认。
我前后考虑了几种做法。但是都失败了。
第一种是用了一个计数器count,CheckBox的值改变时触发change函数,给count加减。主要代码如下:
<van-checkbox v-model="checked" @change="select"></van-checkbox>
data(){ return{ checked:false, count:0, } }, methods:{ select(checked){ if (checked){ this.count+=1; } else{ this.count-=1; } } },
但是问题很奇怪,我确定每次改变都会触发select函数,并且都执行了对count的操作,但是结果不会保存。
举个例子:选择了第一个地址输出是this.count=1,选择第二个地址输出还是this.count=1,并且调试时发现,在第二次执行this.count+=1;之前,this.count的值为0。减法也是。
第二种方法是change改变之后emit发送信号给父组件。但是父组件无法接收到信号。调试确定子组件执行了emit这一步。
this.$emit("change",{checked});
父组件:
<AddItem v-for="(add,index) in List" :key="index" @change="handle" />
然后methods接收:
handle(){ console.log("1111"); },
但是无法接收。
回答2
-
第一种:
因为组件是复用的,你的每一个子组件van-checkbox都维护了独立的对象,所以你的count+=1只是针对单个的组件,并不为影响到所有的。否则的的话,出现一个组件修改了某个属性,其他组件复用时,此属性被修改了这个肯定是不希望的,所以组件中的data才必须是一个函数。必须了解到这点。第二种:
看代码貌似没啥问题,就看你子组件点击时,是否触发了this.$emit('change', { checked }),子组件事件未触发,父组件肯定接受不到。针对第一种解决方案:
van-checkbox不要每个都单独成一个组件,将它们合并成一个组件当作子组件使用,在此子组件维护一个计数器count即可。针对第二种解决方案:
在父组件维护一个计数器count,通过父子组件通信来改变count的状态即可。但是的先解决你的子组件事件触发问题第三种解决方案:
使用中央事件,Event Bus第四种解决方案:
使用vuex,在store里面创建一个共享的状态count支持 0 反对 0 举报2022-01-16 15:34