Vuejs2でコンポーネントの中でコンポーネントを使う

vuejsでvueファイルの中で別のvueファイルをimportしてそのcomponentを使いたいのですが、

vue
1<template>
2	<p>test</p>
3	<example></example>
4</template>
5
6<script>
7	import Example from "./Example.vue"
8	export default {
9		components:{
10			Example
11		}
12	}
13</script>

これだとエラーが出ます。
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

vuejs初心者なので初歩的なことが分からず困っています。
よろしくお願いします。

行動規範の内容に同意します

回答1件

はじめまして

コチラ、.vueのtemplateのなかは全体を<div></div>で囲う必要があります。

<template>
    <div>
      <p>test</p>
      <example></example>
    </div>
</template>

<script>
    import Example from "./Example.vue"
    export default {
        components:{
            Example
        }
    }
</script>

このような感じでうごくかと思います。

投稿2017/05/18 03:07