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

Question

我正在尝试在 child 组件上打开一个 vue material 对话框。我希望触发按钮保留在 parent 上，而对话框模板保留在 child 组件上，以便于维护。

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

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

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。

从不推荐 Mutating prop。

改为这样做

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>

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

Opening (and Closing) vue material dialog on different components

vue.js

vue-material