uView——u-popup 父子传值父组件关闭弹窗只会触发一次解决方案

最新推荐文章于 2024-09-17 22:42:06 发布

dbt@L

最新推荐文章于 2024-09-17 22:42:06 发布

阅读量710

点赞数 9

分类专栏： uView 文章标签： uView

本文链接：https://blog.csdn.net/qq_43201350/article/details/135870713

版权

uView 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章详细介绍了如何在Vue项目中使用u-popup组件，包括设置closeable属性决定是否显示关闭图标，以及如何通过父子组件通信来控制弹窗的显示与关闭。

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

一定要定义一个关闭事件关闭当前弹窗，否则u-popup控制显示/隐藏的值不会更新！！！

一 closeable=true 是否显示关闭图标 (为true)
当closeable 为true时

子组件

<view>
    <u-popup
      :value="show"
      mode="center"
      border-radius="14"
      :closeable="true"
      @close="close"
      :mask-close-able="false"
    >
      <view>测试文本</view>
    </u-popup>
  </view>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    close(){
      this.$emit('close')
    }
  },
};
</script>

父组件

<demoPopup :show="show" @close="show = false"/>
<script>
import demoPopup from "./components/demo-popup.vue";
export default {
  components: {
    demoPopup
  },
  data() {
    return {
      show:false
    }
  },
};
</script>

二 closeable=false 是否显示关闭图标 (默认为false)
当没设置closeable的值，默认为false

子组件

    <u-popup
      :value="show"
      mode="center"
      border-radius="14"
      :mask-close-able="false"
    >
      <view>
        <view>测试文本</view>
        <!-- 自定义事件关闭弹窗 更新 show 的值 -->
        <view @click="close">关闭当前弹窗</view>
      </view>
    </u-popup>
<script>
export default {
  props:{
    show: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    close(){
     this.$emit('close') 
    }
  },
};
</script>

父组件

<demoPopup :show="show" @close="show = false"/>
<script>
import demoPopup from "./components/demo-popup.vue";
export default {
  components: {
    demoPopup
  },
  data() {
    return {
      show:false
    }
  },
};