728x90
"Component template requires a root element, rather than just text."
컴포넌트를 작성할 때 템플릿 안에 있는 문자에 태그로 감싸지 않으면 발생하는 에러.
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
template:'전역 컴포넌트!!'
})
var app = new Vue({
el: '#app'
})
</script>
</body>
이렇게 컴포넌트 template안에 태그 없이 작성하면 아래와 같은 에러가 발생한다.
렌더링이 되지 않는다.
아래 코드와 같이 태그를 넣어주면 된다.
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
template:'<p>전역 컴포넌트!!</p>' //<p>태그로 감쌈
})
var app = new Vue({
el: '#app'
})
</script>
</body>
난 예시로 p태그를 넣었고 본인이 사용 용도에 맞게 작성하면 된다.
<div>, <section> 등등
반응형
'VueJS' 카테고리의 다른 글
| [VueJS] vue : 이 시스템에서 스크립트를 실행할 수 없으므로.... (0) | 2021.02.02 |
|---|---|
| [VueJS] 컴포넌트 props와 리터럴속성 그리고 검증 (0) | 2021.01.27 |
| [VueJS] v-for (0) | 2021.01.23 |
| [VueJS] v-if, v-else-if, v-else 사용시 알아둘 것 (0) | 2021.01.23 |
| [VueJS] v-model, v-once (0) | 2021.01.21 |