Question

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

在子组件的<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的新手，仍然在摸索。任何帮助将不胜感激。

Answer 1

在您的父母中，您有：

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

它应该是（连字符在v-on中替换冒号）：

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

或@close-dialog。

此方法结合您孩子中的this.$emit('close-dialog');应该可以使用。

Vue-从子组件关闭对话框

1 个答案: