vuetify：以编程方式显示对话框

vuetify说：如果要以编程方式打开或关闭对话框，则可以通过使用带有布尔值的v-model来实现。

但是我不清楚这意味着什么。说“使用v模型”充其量是含糊的。父组件在安装程序上知道是否应该打开它，但是我不清楚如何在子组件中动态更改它。我应该使用v-bind传递它吗？

如果是这样，子组件将如何处理？

Vuetify对话框信息在这里：https ://vuetifyjs.com/components/dialogs

据我了解，您有一个子组件，其中有一个对话框。不确定这是否100％正确，但这就是我实现的方式。带有对话框的子组件：

...
export default {
props: {
    dialogVisible: Boolean,
    ...
},
computed: {
    intDialogVisible: {
      get: function () {
        if (this.dialogVisible) {
          // Some dialog initialization code could be placed here
          // because it is called only when this.dialogVisible changes
        }

        return this.dialogVisible
      },
      set: function (value) {
             if (!value) {
               this.$emit('close', some_payload)
             }
      }
}

在父组件中，我们使用它：

data () {
  return {
    myDialogVisible: false
  }
},
methods: {
  myDialogClose () {
    this.myDialogVisible = false
    // other code
  }
}

v-model是指令。您会使用v-model，而不是v-bind。

您链接的页面有几个示例。如果单击<>第一个按钮，它将显示HTML源代码。

v-model对value在组件内部命名的道具进行双向绑定。将绑定变量的值设置为时true，将显示对话框。当时false，它将隐藏。另外，如果关闭该对话框，则会将变量的值设置为false。