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

时间:2021-02-06 08:37:06

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

vue组件化 全局组件 局部组件 

关于vue入门案例请参阅

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

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

vue组件化初体验 全局组件和局部组件
目录结构
vue组件化初体验 全局组件和局部组件
vue.js引用的地方

vue组件化流程

1.创建组件构造器

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

vue组件化初体验 全局组件和局部组件
创建组件构造器
vue组件化初体验 全局组件和局部组件
点点不是字符串的单引号,键盘esc键下方的 \·\·

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

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

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

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

2.注册组件

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

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

3.使用组件

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

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

全局组件和局部组件

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

vue组件化初体验 全局组件和局部组件
mycpn定义在vue实例对象之外,所以是全局对象

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

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

vue组件化初体验 全局组件和局部组件
在vue实例内部定义的就是局部组件
vue组件化初体验 全局组件和局部组件
在vue实例内部定义,并在vue容器使用的局部组件

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

vue组件化初体验 全局组件和局部组件
不会在浏览器中显示
vue组件化初体验 全局组件和局部组件
在vue实例内部定义但不在容器内使用