VueJS錯誤編譯模板

Question

我剛剛用VueJS和Vue-loader做了我的第一個項目。

所以我做了我的第一個組件顯示一個簡單的消息，它工作正常，當我做出一個消息，但我得到一個錯誤，當我做多封郵件：

(Emitted value instead of an instance of Error) 
    Error compiling template: 

    <message>This is a small message!</message> 

    <message>Another one</message> 

    - 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. 

這是我的代碼。我對此很陌生，我無法弄清楚什麼是錯的。

App.vue

<template> 
 
    <message>This is a small message!</message> 
 

 
    <message>Another one</message> 
 
</template> 
 

 
<script> 
 
    import Message from './Components/Message.vue'; 
 

 
    export default { 
 
     name: 'app', 
 

 
     components: { 
 
      Message, 
 
     }, 
 

 
     data() { 
 
      return { 
 

 
      } 
 
     } 
 
    } 
 
</script>

Message.Vue

<template> 
 
    <div class="box"> 
 
     <p> 
 
      <slot></slot> 
 
     </p> 
 
    </div> 
 
</template> 
 

 
<script> 
 
    export default { 
 

 
    } 
 
</script> 
 

 
<style> 
 
    .box { background-color: #e3e3e3; padding: 10px; border: 1px solid #c5c5c5; margin-bottom: 1em;} 
 
</style>

我希望有人能幫助！

Answer 1

該錯誤是不言自明的。每個組件中應該只有一個根元素。所以只需將所有內容打包在一個div中

<template> 
    <div> 
     <message>This is a small message!</message> 
     <message>Another one</message> 
    </div> 
</template>