이름 선행 HTML 요소의 Vue 오류 "알 수 없는 사용자 지정 요소"를 방지하는 방법

이름 선행 HTML 요소의 Vue 오류 "알 수 없는 사용자 지정 요소"를 방지하는 방법

예를 들어 이름 지정 요소를 출력해야 하는 환경에서 Vue를 사용합니다.<foo:aside>예를들면.이러한 요소는 현재 Vue에 의해 어떤 방식으로도 처리되지 않으며(속성에 대한 값 바인딩, 이벤트 핸들러 추가 등), 템플릿에 존재할 뿐입니다.단, 처리해야 할 아이가 포함되어 있을 수 있고 변수 등을 표시하는 콧수염 구문이 포함되어 있을 수 있습니다.v-pre이 기능을 무효로 하기 때문에, 사용 예에 대한 솔루션은 아닙니다.

모든 것이 정상적으로 동작하지만 콘솔에 다음 오류가 표시됩니다.

[Vue warn]: Unknown custom element: <foo:aside> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.

네임스페이스는 루트 요소에 정의됩니다.xmlns:foo하지만 어쨌든 Vue에게 차이는 없을 것이다.

Vue에게 네임스페이스 요소를 무시하도록 지시하거나 적어도 일반 HTML 요소에서 허용되는 네임스페이스를 정의함으로써 이를 방지할 수 있는 방법이 있습니까?

링크된 가능한 복제(전체 네임스페이스에 적용하고 하위 요소가 작동하도록 요구하기 때문에 복제라는 것에는 동의하지 않지만)와 Silencesys의 코멘트 덕분에 다음과 같은 솔루션을 사용할 수 있었습니다.

Vue.config.ignoredElements = [/^foo:/];

Vue 2.5 이후에서는 다음 항목에 대해 정규 표현을 사용할 수 있습니다.ignoredElements이렇게 하면 가능한 모든 태그 이름을 추가하지 않고도 전체 네임스페이스를 무시할 수 있으며 이러한 요소와 하위 요소에 대한 Vue 기능을 유지할 수 있습니다.

사용할 수 있습니다.v-pre요소를 무시하도록 vue에 지시하려면 vue.view api를 체크합니다.

예를 들어 다음과 같습니다.

<foo:aside v-pre>

언급URL : https://stackoverflow.com/questions/56020579/how-to-prevent-vue-error-unknown-custom-element-for-namespaced-html-elements