父组件监视子组件中checkbox的属性

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

但是父组件就是无法接收。
第三种就是直接监视父组件，给父组件增加ref属性，console.log的时候发现ref获得的节点是有子组件的全部属性，也就包括checked属性：

        <AddItem v-for="(add,index) in List"
                 :key="index"
                ref="Item" />

点击确认按钮时触发函数，问题解决：

backToOrder(){
                let items = this.$refs.Item;
                let count = 0;
                for (let i in items)
                    if (items[i].checked)
                        count++;
                if (count!=1)
                {
                    this.$dialog.alert({message:"您到底想要哪个地址呢~"});
                    console.log(count);
                }

不过前面到底是为什么不可以呢，有人遇到过相似的问题吗。

父组件监视子组件中checkbox的属性

猜你喜欢