Question

我是 Vue.js 的新手，最近我们开始在 VUE 和 vuetify 中构建产品。我已经在 v菜单周围编写了一个自定义组件，并将其用作弹出窗口。我已经编写了以下代码，并且工作正常，但是我正在寻找最佳的处理方式。

Popover.vue

    <template>
  <v-menu v-model="togglePopover"
          v-bind="menuProps"
          :offset-y="true">
    <slot slot="activator"></slot>
    <slot name="bodyContent"></slot>
  </v-menu>
</template>

<script>
export default {
  props: {
    closePopover: {
      type: Boolean,
      default: false,
    },
    menuProps: {}, // this property is meant to access the default properties of the vuetify v-menu
  },
  data() {
    return {
      togglePopover: false,
    };
  },
  watch: {
    closePopover(newValue) {
      if (!newValue) {
        this.togglePopover = false;
      }
    },
  },
};
</script>

父组件，我在其中调用 popover 组件，如下所示。

<Popover :menuProps="menusProps"
               :closePopover="showPopover">
        <v-btn>Dropdown</v-btn>
        <div slot=bodyContent>
          <v-text-field placeholder="Type something here"></v-text-field>
          <v-btn @click="showPopover=false">Submit</v-btn>
        </div>
      </Popover>

我的问题在我的弹出框组件中，我使用了名为 togglePopover 的数据属性来启用弹出框。有什么方法可以处理父组件的弹出窗口打开/关闭操作，而无需在子组件中声明额外的属性。

处理vueitfy v菜单的最佳方法

0 个答案: