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