programing

Vue 컴포넌트의 이름은 무엇입니까?

javaba 2022. 8. 14. 16:54
반응형

Vue 컴포넌트의 이름은 무엇입니까?

작은 프로젝트에 Vue를 사용하려고 합니다.처음에는 클라이언트 코드만 사용했어요.그래서 내가 했을 때

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

외부로부터 컴포넌트에 액세스 할 수 있었습니다.mv.
현재 Vue.cli를 사용하고 있기 때문에 mv.vue 내에서 컴포넌트를 정의하고 나서

export default {
    data () {}
    }

여기서 컴포넌트의 nme를 취득하려면 어떻게 해야 합니까?

답변 및 힌트 감사합니다:)

컴포넌트의 이름을 취득할 수 있습니다.이 작업을 수행할 수 있습니다.

this.$vnode.tag

상위 구성 요소의 이름을 하위 구성 요소에서 가져오려면 다음과 같이 하십시오.

this.$parent.$vnode.tag

컴포넌트의 이름을 다음과 같이 지정할 수 있습니다.

export default {
  name: 'mv',

  data () {
    return {}
  }
}

그러나 액세스하려면 가져올 이름을 사용해야 합니다.예를 들어 다음과 같습니다.

import theVariableIWantItToBe from './mv.vue'

console.log(theVariableIWantItToBe)

매우 좋은 @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
}

언급URL : https://stackoverflow.com/questions/44048649/what-is-the-name-of-my-vue-component

반응형