时间戳

首页 > 解决方案 > Vue - 从子组件关闭对话框

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

问题描述

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

  1. 在<v-icon>close</v-icon>子组件中，我正在调用一个调用 this.$emit('close-dialog') 的 closeDialog 方法。
  2. 在 上<v-btn>Cancel</v-btn>，我有 v-on:click="$emit('close-dialog')"。
  3. 在 上<v-btn>Cancel 2</v-btn>，我有 v-on:click="$emit('dialog',false)"。

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

主要组件：

    <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>

子组件：

<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 的新手，并且仍在摸索中。任何帮助将非常感激。

标签： vue.jsvue-componentvuetify.js

解决方案

在您的父母中，您有：

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

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

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

或者@close-dialog。

这种方法，结合this.$emit('close-dialog');你的孩子应该有效。

推荐阅读