vue2.0入手踩的第二个坑-组件

作者: 麦壳儿UIandFE2 | 来源:发表于2017-12-21 12:07 被阅读53次

    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过来的人要注意。

    相关文章

      网友评论

        本文标题:vue2.0入手踩的第二个坑-组件

        本文链接:https://www.haomeiwen.com/subject/wtaowxtx.html