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

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

代码如下：

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材料对话框

2 个答案: