自定义弹窗显示问题?

dialog组件使用visible这个prop开控制显示,监听visible赋值给visibleMe
v-if=“visibleMe”的方式打开关闭弹窗
关闭的时候令visibleMe=false,但是因为visible是prop,不可以在这个组件内更改,所以visible还是true
所以下次调用它的组件再把visible改成true的时候,并不会触发watch
怎么通过只改dialog组件的代码实现这个?

阅读 2.5k
1 个回答
<template>
  <div v-if="visibleMe">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
  data() {
    return {
      visibleMe: this.visible, 
    };
  },
  watch: {
    visible(newVal) {
      this.visibleMe = newVal; 
    },
  },
  methods: {
    closeDialog() {
      this.visibleMe = false;
      this.$emit('update:visible', false); 
    },
  },
};
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题