通过v-model控制组件的显示隐藏,自己封装弹窗。

45 阅读1分钟

在父组件中 弹窗子组件上添加v-model和绑定的控制变量。

<DeviceTatisticsDialog v-model="isShowDeviceTatisticsDialog"></DeviceTatisticsDialog>

在弹窗子组件中添加接受参数,用model选项来定义v-model的行为,this.$emit("hide", false)调用model选项定义的hide行为。

 props: {
      isShowDeviceTatisticsDialog: {
        type: Boolean,
        default: false,
      },
    },
 //model 选项来自定义 v-model 的行为
 model: {
      prop: "isShowDeviceTatisticsDialog",
      event: "hide",
    },  
  methods: {
  /**
    * @description: 关闭弹窗
    */
  hide() {
      this.$emit("hide", false);
      },
    },