vue组件化初体验 全局组件和局部组件
关于vue入门案例请参阅
https://www.cnblogs.com/singledogpro/p/11938222.html 下载vuejs,Hello Vue(vscode)
先看看目录结构,这里的vue.js脚本存放在src文件夹下,所以如果你参照上面的vue入门,记得把vue.js引用的地方也要修改下
vue组件化流程
1.创建组件构造器
在script标签内创建组件构造器,需要注意的是template属性后面的点点不是字符串的单引号,而是ES6的新语法(字符串可以换行),键盘esc键下方的 ` `
调用Vue.extend0创建的是一个组件构造器。
构造器内的template参数,就是我们自定义组件的模板。这样的书写方法非常麻烦,后面还有template标签进行简化
该模板就是在使用到组件的地方,将模板内的HTML代码进行显示。
Vue2.x的文档对这种语法进行封装,直接语法糖,但是在教科书上还是会提到这种方式,了解这种底层会让我们更深入vue的组件化思想
2.注册组件
第一个参数是指你使用这个组件(第一步我们注册的组件构造器)时,它的标签名是什么?如定义该标签为mycpn,在vue管理的实例里该标签就是<mycpn></mycpn>
,第二个参数就是第一步我们注册的组件构造器。
3.使用组件
在vue实例管理的容器内使用刚定义好的mycpn标签(该标签可以自定义)。
全局组件和局部组件
vue实例对象是顶级对象,也可看做一个顶级组件,所以定义在vue实例对象外的组件是全局组件。上述创建的组件就是全局组件,因为它定义在vue实例对象之外。
一旦组件定义在vue实例对象内部,它就变成了局部组件。
全局组件与局部组件的区别在于,全局组件可以在任何地方显示(出现),而局部组件只能在其vue实例对象管理的地方进行显示(出现)。可以简单了解全局组件是董事长,vue实例是总经理,局部是经理。董事长可以在公司在任何部门出现,而经理由于受到总经理的约束,只能在总经理给与他的职权范围内出现。 虽然全局组件哪里都可以显示,但是为了规范化管理,一般都是局部组件。
在vue实例内部定义的局部组件,如果不在vue容器内使用,它不会在浏览器中显示。