vue.js - Vue-从子组件关闭对话框

我正在使用Vue和Vuetify，但在使用$ emit从子组件中关闭对话框时遇到问题。在主要组件中，我使用v:on:close-dialog =“closeDialog”并设置this.dialog = false。我正在尝试从 child 内部调用该函数。尝试三种不同的方式:

在子组件中的<v-icon>close</v-icon>上，我正在调用一个closeDialog方法，该方法调用this。$ emit('close-dialog')。

在<v-btn>Cancel</v-btn>上，我有v-on:click =“$ emit('close-dialog')”。

在<v-btn>Cancel 2</v-btn>上，我有v-on:click =“$ emit('dialog'，false)”。

这些都不会关闭对话框或触发主组件中的closeDialog方法。代码如下。

mainComponent:

    <template>
      <v-flex>
        <v-flex xs12 class="text-xs-right">
          <v-dialog v-model="dialog" fullscreen hide-overlay
transition="dialog-bottom-transition">
              <v-btn fab slot="activator" small color="red" dark>
                <v-icon dark >add</v-icon>
              </v-btn>
            <childComponent v:on:close-dialog="closeDialog" />
          </v-dialog>
        </v-flex>
      </v-flex>
    </template>

    <script>
    import childComponent from './childComponent'

    export default {
      data(){
        return{
          dialog: false
        }
      },
        name: 'Test',
        components: {
            childComponent
        },
        methods:{
          closeDialog: function(){
            console.log('close dialog 2');
            this.dialog = false;

          }
        }
    }
    </script>

childComponent:

<template>
  <v-flex xs12>
      <v-card>
        <v-toolbar dark color="primary">
          <v-btn icon dark v-on:click="closeDialog">
            <v-icon>close</v-icon>
          </v-btn>
          <v-toolbar-title>Dialog Test</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn dark flat v-on:click="$emit('close-dialog')">Cancel</v-btn>
          </v-toolbar-items>
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn dark flat v-on:click="$emit('dialog',false)">Cancel 2</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-flex xs12 class="px-10">
          <v-form ref="form">
            <v-text-field
              v-model="testField"
              :counter="150"
              label="Test field"
              required
            ></v-text-field>
          </v-form>
        </v-flex>
      </v-card>
  </v-flex>
</template>

<script>

  export default {
    data: () => ({
     testField: ''
    }),
    methods: {
      closeDialog: function(){
        console.log('close dialog 1');
        this.$emit('close-dialog');
      }
    }
  }
</script>

正如您可能已经猜到的那样，我是Vue的新手，仍然在摸索着它。任何帮助将非常感激。

最佳答案

在您的 parent 中，您有:

    <childComponent v:on:close-dialog="closeDialog" />

应该是(连字号在v-on中替换冒号):

    <childComponent v-on:close-dialog="closeDialog" />

或@close-dialog交替出现。

此方法与 child 中的this.$emit('close-dialog');结合使用即可。

关于vue.js - Vue-从子组件关闭对话框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53872946/