1.错误代码示范

<template>
    <Child :message="message" :age="age" :list="list"/>
    <button @click="message='全新的数据'" >修改数据</button>
    <hr/>
    <Child2 @onEvent="messageHandle"/>
    <p>{{ child2Data }}</p>
</template>

<script>
    import Child from "./Child.vue";
    import Child2 from "./Child2.vue"
    export default {
        name: "Parent",
        data(){
            return {
                message:"数据测试",
                age: 20,
                list:["iwen","sxt","itbaizhan"],
                child2Data:""
            };
        },
        methods:{
            messageHandle(data)
            {
                this.child2Data = data;
            },
        },
        components:{
            Child,
            Child2,
        }
    }
</script>

<style scoped>

</style>

2.报错内容

 3.正确示范

<template>
    <div>
    <Child :message="message" :age="age" :list="list"/>
    <button @click="message='全新的数据'" >修改数据</button>
    <hr/>
    <Child2 @onEvent="messageHandle"/>
    <p>{{ child2Data }}</p>
    </div>
</template>

<script>
    import Child from "./Child.vue";
    import Child2 from "./Child2.vue"
    export default {
        name: "Parent",
        data(){
            return {
                message:"数据测试",
                age: 20,
                list:["iwen","sxt","itbaizhan"],
                child2Data:""
            };
        },
        methods:{
            messageHandle(data)
            {
                this.child2Data = data;
            },
        },
        components:{
            Child,
            Child2,
        }
    }
</script>

<style scoped>

</style>

4.错误总结

从文字翻译上来讲，其实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这句话已经讲的很明白了，直译出来 就是：组件模板应该包含一个根元素。如果在多个元素上使用V-IF，则使用V-ELS-IF来链接它们。

但是这么说依然让新手有点摸不着头脑，其实就是说在模版里只能有一个主div（根对象），如果有多个元素，请用一个主div包含他们。