1:浏览器报错
Component template requires a root element, rather than just text.
浏览器报错.png
分析图中位置:带大家怎么查看分析错误。
位置1:错误类型--从大的方向锁定。--模板编译出错。肯定锁定了是".vue"类型的文件出了问题。
位置2:错误的精准位置(文件内某处)--在“app content”处
位置3:错误原因--组件模板要求是一个元素,而不是文本。所以我们解决原则:要给组件外层裹上一个标签。
位置4:发生错误的文件
2:源码
错误的:
<template>
app content
</template>
修正后:
<template>
<div class="appContent">app content</div>
</template>
完整代码:
<template>
<div class="appContent">app content</div>
</template>
<script>
export default {
// 组件的名称
name: 'appContent',
// props 可以是数组或对象,用于接收来自父组件的数据
props: {},
// 数据绑定
data() {
return {}
},
}
</script>
<style>
</style>
3:原因:
在每个组件模板(.vue文件),不在支持片段代码
组件中模板:
之前:
<template>
<h3>我是组件</h3>
</template>
现在: 必须有根元素,包裹住所有的代码
<template id="aaa">
<div>
<h3>我是组件</h3>
</div>
</template>
4:小结
到了2.0有很多变化的地方,从1.x过来的人要注意。
网友评论