目录
1.错误代码示范
2.报错内容
3.正确示范
4.错误总结
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包含他们。
