Vue3 data中的数据改变无效的问题和子组件向父组件emit发送消息无效的问题

Question

背景：
线上商城下订单的时候，用户选择存在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");
            },

但是无法接收。

Answer 1

第一种：
因为组件是复用的，你的每一个子组件van-checkbox都维护了独立的对象，所以你的count+=1只是针对单个的组件，并不为影响到所有的。否则的的话，出现一个组件修改了某个属性，其他组件复用时，此属性被修改了这个肯定是不希望的，所以组件中的data才必须是一个函数。必须了解到这点。

第二种：
看代码貌似没啥问题，就看你子组件点击时，是否触发了this.$emit('change', { checked })，子组件事件未触发，父组件肯定接受不到。

针对第一种解决方案：
van-checkbox不要每个都单独成一个组件，将它们合并成一个组件当作子组件使用，在此子组件维护一个计数器count即可。

针对第二种解决方案：
在父组件维护一个计数器count，通过父子组件通信来改变count的状态即可。但是的先解决你的子组件事件触发问题

第三种解决方案：
使用中央事件，Event Bus

第四种解决方案：
使用vuex，在store里面创建一个共享的状态count

Answer 2

vue交流群995147657，欢迎各位加入，大佬在线答疑。。。