我刚刚用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>

我希望有人能帮忙!

推荐答案

这个错误不言自明.每个组件中应该只有一个根元素.所以把所有东西都放在一个小隔间里.

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

Vue.js相关问答推荐

Select 项目后,Vuetify v-select在select后面显示数字1

在 v-for 中定义变量有什么问题吗?

如何使用 Vite 从公共目录导入 JSON 文件?

纵横比元素溢出容器

Vue3如何将自定义事件绑定到路由视图中的特定组件?

使用 Vue.js 清除数组内容和react性问题

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试?

从数据库中删除后,Vue.js $remove 不删除元素

无需直接 DOM 操作即可绘制d3-axis

Vuetify Datatable - 在所有列上启用内容编辑

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

PhpStorm 中Expected预期表达式

React.js 是否有类似 Vue.js

Vuejs模板继承

如何在 Vue.js 中获取组件元素的 offsetHeight?

vue 在 v-model 之后执行 @click

[Vue 警告]:无效的props:propsscrollThreshold的类型判断失败.期望的数字,得到字符串

为 Vue 组件动态添加属性

如何将 Angular 和 Vue 项目合并在一起?

Vuex 存储数据总是驻留在内存中?