input实现父子绑定

最新推荐文章于 2025-03-23 07:30:00 发布

weixin_49596018

最新推荐文章于 2025-03-23 07:30:00 发布

阅读量159

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_49596018/article/details/117401922

版权

本文讲解如何在Vue中实现父组件的checkbox点击事件，通过`.stopPropagation()`阻止冒泡并同步子组件的状态。通过`data-index`和`data-id`传递参数，更新数组结构以保持父子组件间的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笔记：input实现父子绑定

父级input
   <input
                        type="checkbox"
                        @click="loveOneSopChild"
                        :data-index="index"
                        :data-id="item.list.id"
                        :checked="item.list.checked"
                      />

子集

 <input
                            type="checkbox"
                            @click="loveOneitemChild"
                            :data-id="its.id"
                            :checked="its.checked"
                          />

父级点击的时候触发的事件（给自己及其子集新增一个属性字段）

 e.stopPropagation();
    // console.log(e.target.checked, e.target.dataset.index);
    const fatehrArr: any = this.state.sopListsBind;
    fatehrArr[e.target.dataset.index - 0].list["checked"] = e.target.checked;
    fatehrArr[e.target.dataset.index - 0].items.forEach((element: any) => {
      element["checked"] = e.target.checked;
    });

    this.state.sopListsBind = [...fatehrArr];
    // 修改以后的数组的值
    console.log(this.state.sopListsBind, "修改以后的数组");