为什么我导入的 VueJS 组件不显示？

Question

我有以下名为“PasswordResetView”的 Vue 视图：

<template>
  <v-content>
    <v-card>
      <v-card-title primary-title>
        Passwort ändern
      </v-card-title>

      <v-card-text>
        <v-text-field
                id="password"
                label="Passwort"
                name="password"
                prepend-icon="mdi-lock"
                type="password"
        />
        <v-text-field
                id="passwordRepeated"
                label="Passwort wiederholen"
                name="passwordRepeated"
                prepend-icon="mdi-lock"
                type="password"
        />
        <v-text-field
                id="mail"
                label="E-Mail"
                name="mail"
                prepend-icon="mdi-lock"
                type="text"
        />
      </v-card-text>

    </v-card>
  </v-content>
</template>

<script>
import axios from "axios";

export default {

  name: "passwordreset",
  data() {
    return {
      password: "",
      passwordRepeated: "",
      mail: "",
      errormessage: "",
    };
  },
  methods: {
    changePassword() {
      let payload = {mail: this.mail, password:this.password, passwordRepeated: this.passwordRepeated};
      axios({
        method: "post",
        url: "/api/anonymous/register/pwreset",
        data: payload,
      }).then(() => {
        this.$props.passwortresetkey = "good"
      })
    },

  }
};
</script>

<style scoped/>

该视图由另一个 vue 组件“PasswordReset”导入，如下所示：

<template>
  <div>
    <PasswordReset v-if="pwresetkey === 'good'"></PasswordReset>
    <div v-else>
      <v-card>
        <v-card-title primary-title>
          Passwort ändern
        </v-card-title>

        <v-card-text>
          Leider ist der Link ungültig.
        </v-card-text>
      </v-card>
    </div>
  </div>

</template>

<script>
import PasswordReset from "../../../components/anon/PasswordReset";

export default {
    name:"passwordreset",
    components: PasswordReset
};
</script>

对应的路由器：

{
        path: "/pwreset",
        name: "pwreset",
        meta: {
            requiresDisponent: false,
            requiresRecurring: false,
            requiresOneTime: false,
            requiresAnon: true
        },
        component: () => import("@/views/recurring/account/PasswordReset"),
        props: true
    },

但是，当我启动应用程序时，只显示来自“PasswordReset”的内容（v-card），而不是输入字段。 此外，在“PasswordReset”组件中，它表示导出默认值未启用。

为什么这被标记为未使用并且视图未导入？

Answer 1

来自 vuejs 文档：

如果你使用 kebab-case

Vue.component('my-component-name', { /* ... */ })

使用 kebab-case 定义组件时，您还必须在引用其自定义元素时使用 kebab-case，例如在 .

如果你使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

使用 PascalCase 定义组件时，您可以在引用其自定义元素时使用任何一种情况。 这意味着两者都可以接受。 但是请注意，只有 kebab-case 名称在 DOM 中直接有效（即非字符串模板）。

Answer 2

尝试像这样更改密码重置组件：

<script>
import PasswordReset from "../../../components/anon/PasswordReset";

export default {
    name:"passwordreset",
    components: {PasswordReset}
};
</script>

VueJS 组件注册