Vuejs 구성 요소 템플릿에는 루트 1개 요소만 필요한가?

Vuejs 구성 요소 템플릿에는 루트 1개 요소만 필요한가?

나는 이것에 대해 문서로 아무것도 보지 못했다. 아마도 나는 충분히 검색하지 않았겠지만, 구성 요소 템플릿은 루트 요소와 "더 잘" 작동하는 것 같다(더 나은 의미: 그것은 Laravel Elixir 실행과 함께 루트 요소 없이 작동한다).gulp달리기는 하지만gulp --production첫 번째 요소만 표시).

내부에 루트 요소가 하나만 있으면 되는가?<template>?

즉, 이 템플릿 코드는 Vue 2에서 허용되는가?

<template>
  <div>A</div>
  <div>B</div>
</template>

모든 구성 요소는 정확히 하나의 루트 요소를 가져야 한다.단편적인 인스턴스는 더 이상 허용되지 않는다.다음과 같은 템플릿이 있는 경우:

<p>foo</p>
<p>bar</p>

다음과 같이 간단히 전체 내용을 새로운 요소로 포장하는 것이 좋다.

<div>
  <p>foo</p>
  <p>bar</p>
</div>

VueJS 문서

그것은 편찬될 수 있지만, Vue는 당신에게 다음과 같은 경고를 보낼 것이다.

[부유 경고]:구성 요소 템플릿에는 정확히 하나의 루트 요소가 포함되어야 함:

템플릿의 첫 번째 요소만 표시하므로 다음과 같이 템플릿을 하나의 루트 수준 태그로 감싸십시오.

<template>
  <div>
    <div>A</div>
    <div>B</div>
  </div>
</template>

다음 JSFiddle의 개발자 도구 콘솔을 보면 무슨 뜻인지 알 수 있을 것이다.

https://jsfiddle.net/woLwz98n/

나도 기회를 봐서 감사할 거야.laravel-log-viewer, 나는 항상 그것을 사용하고 있고 그것은 훌륭해!

예, Vue 2.0 템플릿에 단일 루트 요소가 있어야 함.부모 분할을 만들고 모든 구성 요소 분할을 그 안에 넣으십시오.

<template>
  <div>
    <div>A</div>
    <div>B</div>
  </div>
</template>

Vue.js 크리에이터는 이 게시물에서 같은 내용을 언급한다.
https://github.com/vuejs/vue-loader/issues/384

제시된 답변에 더하여, 나는 내 의견을 덧붙이자면 다른 사람에게 도움이 될 수 있기 때문이다.나는 (테이블 행의) 하위 구성요소를 가지고 있었고, 위에 놓인 해결책을 시도하면서 테이블 행 주위에 포장 칸을 계속 두었지만, 부모 구성요소가 아이가 아닌 포장이 필요한 부분이라는 것을 깨달았다. 문제가 해결되었다.따라서 이 오류가 발생하는 상위/하위 구성 요소 상황인 경우 상위 템플릿 코드에 div를 감으십시오.

참조URL: https://stackoverflow.com/questions/40419062/does-a-vuejs-component-template-need-only-root-one-element