在不同组件上打开（和关闭）vue 材质对话框

Question

我正在尝试在子组件上打开一个 vue 材质对话框。我希望触发按钮保留在父组件上，对话框模板保留在子组件上，以便维护。

对话框正确打开，但是当我单击关闭按钮时，对话框关闭，但我无法使用触发按钮再次打开它。我正在使用道具将变量从父级传递给子级。

如何关闭对话框并再次打开？

app.vue：

<template>
  <div>
    <button @click="showContextMenu = true">
      <span>Show Context Menu</span>
    </button>
    <contextMenu :showContextMenu="showContextMenu"></contextMenu>
  </div>
</template>

<script>
import contextMenu from "contextMenu.vue";

export default {
  data() {
    return {
      showContextMenu: false,
    };
  },
  components: {
    contextMenu,
  },
};
</script>

contextMenu.vue：

<template>
  <md-dialog :md-active.sync="showContextMenu">
    <md-dialog-title>Preferences</md-dialog-title>Dialog
    <md-dialog-actions>
      <md-button class="md-primary" @click="showContextMenu = false">Close</md-button>
    </md-dialog-actions>
  </md-dialog>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["showContextMenu"],
};
</script>

Answer 1

您实际上是在尝试设置app 中存在的属性，但您在contextMenu 中将其切换为false。

不推荐使用变异道具。

改为这样做

App.vue

<template>
  <div>
    <button @click="showContextMenu = true">
      <span>Show Context Menu</span>
    </button>
    <contextMenu v-if="showContextMenu" 
     :showContextMenu="showContextMenu" 
     @close-context="showContextMenu = false"> //capturing event close-context
    </contextMenu>
  </div>
</template>

然后在contextMenu 中，向父级发出一个事件。

contextMenu.vue

<template>
  <md-dialog :md-active.sync="showContextMenu">
    <md-dialog-title>Preferences</md-dialog-title>Dialog
    <md-dialog-actions>
      <md-button class="md-primary" @click="closeContext">Close</md-button>
    </md-dialog-actions>
  </md-dialog>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    closeContext() {
      this.$emit('close-context'); // emitting to parent
    },
  props: ["showContextMenu"],
};
</script>

Answer 2

将 props 传递给子组件会创建单向绑定，因此您不能使用它们将状态从子组件传递给其父组件。您可以让contextMenu 发出一个事件，在该事件上更改父级中showContextMenu 变量的值。请记住以下几点：props 用于将状态从父组件传递到子组件，事件用于执行相反的操作。

代码如下所示：

app.vue:

<template>
  <div>
    <button @click="showContextMenu = true">
      <span>Show Context Menu</span>
    </button>
    <contextMenu :showContextMenu="showContextMenu" @close="showContextMenu = false"></contextMenu>
  </div>
</template>

<script>
import contextMenu from "contextMenu.vue";

export default {
  data() {
    return {
      showContextMenu: false,
    };
  },
  components: {
    contextMenu,
  },
};
</script>

contextMenu.vue:

<template>
  <md-dialog :md-active.sync="showContextMenu">
    <md-dialog-title>Preferences</md-dialog-title>Dialog
    <md-dialog-actions>
      <md-button class="md-primary" @click="$emit('close')">Close</md-button>
    </md-dialog-actions>
  </md-dialog>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["showContextMenu"],
};
</script>