我的 Vue 组件的名称是什么？

Question

我正在尝试将 Vue 用于一个小项目。我只从客户端代码开始。所以当我做

const mv = new Vue({...});

我能够通过 mv 从外部访问该组件。
现在我正在使用 Vue.cli，所以我在 mv.vue 中定义了我的组件，然后我有

export default {
    data () {}
    }

这里，如何获取我的组件的nme？

感谢任何回复或提示:)

Answer 1

您可以这样命名您的组件：

export default {
  name: 'mv',

  data () {
    return {}
  }
}

但要访问它，您需要使用导入时使用的名称。例如：

import theVariableIWantItToBe from './mv.vue'

console.log(theVariableIWantItToBe)

Answer 2

你可以得到组件的名称，你可以这样做

this.$vnode.tag

如果您希望父组件的名称来自其子组件，请执行此操作

this.$parent.$vnode.tag

Answer 3

为了扩展非常好的@vamsi-krishna 答案并对其进行更新，我发现 Vue 现在经常在 $vnode.tag 上加上前缀 vue-component-3-YourComponentName。

您可以使用以下代码解决此问题。也许，只是在缺少标记的情况下，回退到组件中根元素的 ID。

有时，Vue 在其 errorHandler 和 warnHandler 全局事件中根本不传回组件。所以我先处理了那个场景。

if (!vm){
    return '[unknown]'
}

if (vm.$vnode.tag) {
    const res = vm.$vnode.tag
    return res.replace(/vue-component-\d+-/i, '')
}

if (vm.$el.id) {
    return vm.$el.id
}

我的 Vue 组件的名称是什么？

What is the name of my Vue component?

vue.js

vue-component

vuejs2