组件:

就相当于我们把一串我们想重复用的代码封装起来,当我们想要再次进行使用的时候,我们可以进行重复调用,来减少代码量.它像标签一样使用,这一组件提供对应的结构,功能和样式.

那么什么是全局组件?

在vm实例外创建的组件叫全局组件

如何创建全局组件:

1.我们使用Vue.component('名称',{配置})来封装个简单的全局组件

我们使用Vue.component("名称",{template:""})中的template来指定组件的结构

细节:template中定义模板,只能有一个根元素.

数据另外使用别的

已html文件为例,引入vue.js


<script src="../vue.js"></script>

<body>

    <div id="sinan">

<!--像标签一样使用全局组件, 可重复调用 -->

        <first></first>

        <first></first>

        <first></first>

    </div>

</body>

<script>

//vm实例外创建的组件,Vue.component('名称',配置(它是个对象))

    Vue.component("first",{

        template:'<div><p>创建全局组件</p></div>'

    })

//关联 使用范围

    var vm = new Vue({

        el:"#sinan"

    })

</script>

缺点:

1.它是全局的:同全局变量相同,对性能很大的影响

全局变量是单独的存储空间，区别于一般的变量，全局变量在子函数中使用后，可以仍然保存数据，造成内存浪费.而一般变量，除了输出数据，其余数据都会清空.就因为所有地方都可以用全局变量，一旦在大的工程中出现问题，就需要在所有文件中对全局变量排错，这样非常不友好，所以不建议使用。

2.字符串模板缺乏语法高亮:没有提示,没有报错,没有层次结构...

8.png

当要使用层次结构需要在每句结尾加上\,太繁琐了

3.缺少CSS语法:当你在html文件中的<head></head>写入公共样式的时候,很有可能把复用的组件样式都进行了修改.

4.没有构建步骤限制只能使用 HTML 和 ES5 JavaScript,(它只能写入浏览器可识别的代码)而不能使用预处理器，如 Pug (formerly Jade) 和 Babel,less,sass等

解决方案:

使用单应用组件(.vue文件)的方式:
(单文件组件的应用的创建使用方法在03文章上)

9.png

高亮,步骤,css问题全部结局

webpack中支持vue单文件组件格式中文文档

Vue Loader 是一个webpack的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

https://vue-loader.vuejs.org/zh/

01.vue的可复用的全局组件和其缺点的解决方案