Question

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

但是我不清楚这意味着什么。说＆＃34;使用v-model＆＃34;充其量是模糊的。父组件在设置时知道它是否应该打开但我不清楚如何在子项中动态更改它。我应该使用v-bind传递它吗？

<login v-bind:showDialog></login>

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

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

Answer 1

据我所知，你有一个子组件，里面有一个对话框。不确定这是100％正确，但这是我实现它的方式。带对话框的子组件：

<template>
  <v-dialog v-model="intDialogVisible">
...
</template>

<script>
...
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)
             }
      }
}

在父组件中

我们使用它：

<my-dilaog :dialogVisible="myDialogVisible"
           @close="myDialogClose">
</my-dialog>

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

Answer 2

v-model是一个指令。您可以使用v-model，而不是v-bind。

您链接的页面有几个示例。如果单击第一个上的<>按钮，则会显示

的HTML源代码

<v-dialog v-model="dialog">

v-model对组件内名为value的prop进行双向绑定。将绑定变量的值设置为true时，将显示对话框;当false时，它会隐藏。此外，如果对话框被取消，它会将变量的值设置为false。

Answer 3

Дмитрий Алферьев的答案是正确的，但会收到“避免直接更改道具”警告，因为在关闭对话框时，v对话框尝试将v-model更改为false，同时我们将prop传递给v-model并获得了props的值没改变。为了避免警告，我们应该使用titleLabel.leadingAnchor.constraint(equalTo: lg.leadingAnchor,constant:17), titleLabel.trailingAnchor.constraint(equalTo: lg.trailingAnchor,constant:-17),，:value

@input

在父母中

<template>
    <v-dialog :value="dialog" @input="$emit('update:dialog',false)" @keydown.esc="closeDialog()" >
    ...
    </v-dialog>
</template>
<script>
    export default {
        props: {
            dialog: Boolean
        },
        methods: {
            closeDialog(){
                this.$emit('closeDialog');
            }
        }

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

3 个答案: