Question

在我当前的Nuxt项目中，我被要求进行确认弹出窗口。

目标是拥有这样的东西：

为了制作可重用的组件（用于删除，创建，更新等），我将其设为通用：

<template>
  <v-dialog v-model="show" max-width="500px" persistent="persistent">
    <v-card>
      <v-container>
        <v-card-text class="headline" align="center" justify="center">{{ $t(titleKey) }}</v-card-text>
        <v-card-actions align="center" justify="center">
          <v-btn color="blue darken-1" text @click="$emit('close-confirm-dialog')">{{ $t('cancel') }}</v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="$emit('close-confirm-dialog'), $store.dispatch(vuexAction, itemId)"
            >{{ $t('ok') }}</v-btn
          >
        </v-card-actions>
      </v-container>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    itemId: {
      type: String,
      default: undefined,
    },
    vuexAction: {
      type: String,
      default: undefined,
    },
    titleKey: {
      type: String,
      default: undefined,
    },
  },
};
</script>

evreything在当前组件中按预期工作。

但是，为了提高我的技能并提高应用程序的性能，我试图使此组件正常工作：

<template functional>
  <v-dialog v-model="props.show" max-width="500px" persistent="persistent">
    <v-card>
      <v-container>
        <v-card-text class="headline" align="center" justify="center">{{ parent.$t(props.titleKey) }}</v-card-text>
        <v-card-actions align="center" justify="center">
          <v-btn color="blue darken-1" text @click="listeners['close-confirm-dialog']">{{ parent.$t('cancel') }}</v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="listeners['close-confirm-dialog'], parent.$store.dispatch(props.vuexAction, props.itemId)"
            >{{ parent.$t('ok') }}</v-btn
          >
        </v-card-actions>
      </v-container>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    itemId: {
      type: String,
      default: undefined,
    },
    vuexAction: {
      type: String,
      default: undefined,
    },
    titleKey: {
      type: String,
      default: undefined,
    },
  },
};
</script>

然后，除单击“确定”按钮外，其他所有内容似乎均正常运行。实际上，当我单击“取消”时，弹出窗口会关闭，但是，当我单击“确定”时，将正确启动vuex动作，但弹出窗口未关闭（使用常规组件，我没有这个问题）。

我不明白为什么使用功能组件时弹出窗口没有关闭。 =>有人可以解释一下吗？

预先感谢

Vue功能组件的异常行为

0 个答案: