封裝van-popup為自己的彈窗組件解決v-moel props單向數據流不能修改的問題。

今天需要把項目的van-popup組件封裝成自己的組件可隨處調用，因為<van-popup v-model="show">內容</van-popup> 通過show的雙向數據綁定控制 開關 一開始想通過$emit回傳回去但發現並不是想象中那樣 后來多虧vant群幫助解決了該問題 感謝

父組件調用子組件

<text-consult v-model="showPostDialog"></text-consult>

子組件

<template>
  <div>
    <van-popup :value="value" @input="val=>this.$emit('input',val)" closeable :style="{ height: '5.5rem',width:'5rem' }" class="mypop" >
        <div class="box">
          <img :src="qrcode" alt="">
          <p>{{saler_qrcode_content}}</p>
        </div>
      </van-popup>
  </div>
</template>

export default {

  name:'TextConsult',

  props:{

    value:Boolean

  },

 

 以上。