Javascript VueJS 错误编译模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43558481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS error compiling template
提问by Nieck
I just made my first project with VueJS and Vue-loader.
我刚刚用 VueJS 和 Vue-loader 做了我的第一个项目。
So I made my first component to show a simple message, it works fine when I make one message, but I get an error when I make multiple messages:
所以我制作了我的第一个组件来显示一条简单的消息，当我发送一条消息时它可以正常工作，但是当我发送多条消息时出现错误：
(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.
This is my code. I'm very new to this and I can't figure out what's wrong.
这是我的代码。我对此很陌生，我无法弄清楚出了什么问题。
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
消息.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>I hope somebody can help!
我希望有人能帮忙！
回答by Cobaltway
The error is pretty self-explanatory. You should have only one root element in each component. So just pack everything in a div.
该错误是不言自明的。每个组件中应该只有一个根元素。所以只需将所有内容打包在一个 div 中。
<template>
<div>
<message>This is a small message!</message>
<message>Another one</message>
</div>
</template>
