van-popup がコンポーネントをカプセル化する場合のデータ双方向バインディングの問題

要件:入力ボックスの入力内容がポップアップボックスである
問題:コンポーネントをカプセル化した後、閉じるボタンをクリックするとエラーが報告される

情報を調べたところ、2 つの方法が見つかりました。

1 つ目: 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>

2 番目のタイプ: 同期構文 (vue2.3 以降) を使用し、計算されたゲッターとセッターを使用します。

    <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);
      }
    }
  },

参考：https://blog.csdn.net/gp3098/article/details/104407980