处理 vueitfy v-menu 的最佳方法答案

【问题标题】：Best way to handle Vuetify v-menu处理 vueitfy v-menu 的最佳方法
【发布时间】：2019-02-23 07:01:20
【问题描述】：

我是 Vue.js 的新手，最近我们开始在 VUE 和 vuetify 中构建我的产品。我围绕 v-menu 编写了一个自定义组件，并将其用作 popover。我已经编写了以下代码，它工作正常，但我正在寻找最好的处理方式。

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 的数据属性来启用弹出框。有没有办法处理父组件的弹出窗口打开/关闭而不在子组件中声明额外的属性。

【问题讨论】：

您可以将value 传递给v-menu 而不是v-model <v-menu :value="value"，然后将其定义为prop，例如props: ["value"] 在子级中，在父级中您可以使用 v-model <parent-menu v-model="menu">。然后在父级中使用 @click="menu = !menu" 按钮（可能是激活器）。使用对话框查看类似的解决方案：stackoverflow.com/a/49315704/1981247

标签： vue.js vuetify.js

【解决方案1】：

有办法。当您想关闭子弹出框时，发出一个名为“close-popover”(this.$emit('close-popover') 的事件。然后，在你的父母身上，设置@close-popover="showPopover=false"。这样，您也不必在您的孩子上声明数据变量。希望这可以帮助。查看事件发射器：https://vuejs.org/v2/guide/components-custom-events.html。

【讨论】：