vue组件化初体验 全局组件和局部组件

vue组件化初体验 全局组件和局部组件

关于vue入门案例请参阅

https://www.cnblogs.com/singledogpro/p/11938222.html 下载vuejs,Hello Vue（vscode）

先看看目录结构，这里的vue.js脚本存放在src文件夹下，所以如果你参照上面的vue入门，记得把vue.js引用的地方也要修改下

目录结构

vue.js引用的地方

vue组件化流程

1.创建组件构造器

在script标签内创建组件构造器,需要注意的是template属性后面的点点不是字符串的单引号，而是ES6的新语法(字符串可以换行),键盘esc键下方的 ` `

创建组件构造器

点点不是字符串的单引号，键盘esc键下方的 \·\·

调用Vue.extend0创建的是一个组件构造器。

构造器内的template参数，就是我们自定义组件的模板。这样的书写方法非常麻烦，后面还有template标签进行简化

该模板就是在使用到组件的地方，将模板内的HTML代码进行显示。

Vue2.x的文档对这种语法进行封装，直接语法糖，但是在教科书上还是会提到这种方式，了解这种底层会让我们更深入vue的组件化思想

2.注册组件

第一个参数是指你使用这个组件（第一步我们注册的组件构造器）时，它的标签名是什么?如定义该标签为mycpn，在vue管理的实例里该标签就是<mycpn></mycpn> ,第二个参数就是第一步我们注册的组件构造器。

注册组件

3.使用组件

在vue实例管理的容器内使用刚定义好的mycpn标签(该标签可以自定义)。

使用组件

全局组件和局部组件

vue实例对象是顶级对象，也可看做一个顶级组件，所以定义在vue实例对象外的组件是全局组件。上述创建的组件就是全局组件，因为它定义在vue实例对象之外。

mycpn定义在vue实例对象之外，所以是全局对象

一旦组件定义在vue实例对象内部，它就变成了局部组件。

全局组件与局部组件的区别在于，全局组件可以在任何地方显示(出现)，而局部组件只能在其vue实例对象管理的地方进行显示(出现)。可以简单了解全局组件是董事长，vue实例是总经理，局部是经理。董事长可以在公司在任何部门出现，而经理由于受到总经理的约束，只能在总经理给与他的职权范围内出现。 虽然全局组件哪里都可以显示，但是为了规范化管理，一般都是局部组件。

在vue实例内部定义的就是局部组件

在vue实例内部定义，并在vue容器使用的局部组件

在vue实例内部定义的局部组件，如果不在vue容器内使用,它不会在浏览器中显示。

不会在浏览器中显示

在vue实例内部定义但不在容器内使用