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组件的名称是什么？

3 个答案: