未知的自定义元素 vuejs nuxtjs

Question

我遇到了一个错误

想知道我做错了什么。 我想制作以 for 开头的可重用组件：一个按钮。 我把它放在一个文件路径中：/components/MusicPlayer.vue:

<template>
  <div>
    <v-btn @click="playMusic">
      I am a button
    </v-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      test: require('@/assets/YES.mp3')
    }
  },
  methods: {
    playMusic () {
      const pav = new Audio(this.test)
      pav.play()
    }
  }
}
</script>

<style>
#MusicPlayer{
    background: red;
}
</style>

然后我尝试在我的布局路径 /layouts/LoggedIn.vue 中根据需要导入和导出：

<template>
  <v-app id="Logged-In-Layout">
    <transition
      name="view"
    >
      <router-view />
    </transition>
    ...  <- some code -> ...
    </v-app-bar>
    <v-btn id="scroll-to-top-btn" fab color="pink" @click="scrollToTop">
      <v-icon>mdi-arrow-up-bold-outline</v-icon>
    </v-btn>
    <Player id="ricardo" />     <--- my custom component here.
  </v-app>
</template>
<script>
import { MusicPlayer } from '@/components/MusicPlayer.vue'
export default {
  components: {
    Player: MusicPlayer
  },
  data: () => ({
    dialog: false,
    drawer: false
  }),
  methods: {
    scrollToTop () {
      window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

如果我放 Player: MusicPlayer 或 'otherName': MusicPlayer 甚至只是 MusicPlayer 都没关系，仍然不起作用。必须出现的按钮是 0x0 px。尝试包装在一个

<div> <Player /> </div>

Answer 1

import { MusicPlayer } should be import MusicPlayer, without the braces. – skirtle 5 mins ago

这行得通。