van-popup封装组件时数据双向绑定问题

最新推荐文章于 2024-01-05 18:03:20 发布

我的代码永没有bug

最新推荐文章于 2024-01-05 18:03:20 发布

阅读量699

点赞数

分类专栏： vant vue 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_48300785/article/details/125328796

版权

vue 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

vant

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue组件封装过程中遇到的点击关闭按钮报错问题，提供了两种解决方案。一种是通过将v-model拆分为value和@input，利用$emit实现数据同步；另一种是使用sync修饰符，结合computed的getter和setter进行数据传递。这两种方法都可以有效解决子组件关闭弹窗时的数据同步问题。

摘要由CSDN通过智能技术生成

需求： 输入框输入内容是弹出弹框
问题： 在封装组件后，点击关闭按钮会报错
在这里插入图片描述
查阅资料后找到两个方法

第一种：v-model拆分成：value和@input

    父组件内调用子组件使用v-model
    子组件内的孙组件（van-popup）的v-model拆分成:value和@input
    然后通过$emit完成数据同步
    van-popup绑定的value对应从父组件内传来的props内的value
    van-popup的input事件生成的新值弹射到父组件v-model对应的默认input事件参数

    <van-popup
      :value="popupIsShow"
      @input="val => this.$emit('input', val)"
      round
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div
        style="margin-bottom: 1.333vw"
        v-for="(item, index) in list"
        :key="index"
        @click="clickTag(item)"
      >
        {{ item }}
      </div>
    </van-popup>

第二种：使用sync语法（vue2.3+）用到了computed的getter和setter

在这里插入图片描述

    <van-popup
      v-model="vanpopup"
      round
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div
        style="margin-bottom: 1.333vw"
        v-for="(item, index) in list"
        :key="index"
        @click="clickTag(item)"
      >
        {{ item }}
      </div>
    </van-popup>



  computed: {
    vanpopup: {
      get() {
        return this.popupIsShow;
      },
      set(value) {
        this.$emit("update:popup", value);
      }
    }
  },