封装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
  },

 以上。

猜你喜欢

转载自www.cnblogs.com/junwu/p/12426236.html
今日推荐