注册全局组件和局部组件

定义组件

两种组件的定义格式


注册局部组件

①创建一个PageTools文件夹并同时创建一个index.vue组件文件

②就和我们平时使用普通组件一样,先在使用该组件的文件中导入,在compoents中注册,然后在结构中使用

我们的业务组件一般都定义成了局部组件,使用的时候需要在components中注册,而我们全局通用组件一般是需要定义为全局组件的,不需要局部注册

注册全局组件

方法一:

①创建一个PageTools文件夹并同时创建一个index.vue组件文件

②直接在main.js中导入index.vue组件,给定组件名称以及组件的文件路径

③通过  Vue.component (组件名-字符串,导入时的组件名)  main.js

示例

以上我们通过Vue.component全局api实现了全局注册,在业务组件中就不需要再引入和注册了,直接在结构中使用即可。

方法二:公共组件(用 Vue.use()的方法注册全局组件)

1.关于Vue.use()

介绍:它是Vue提供的一个静态方法,用来向Vue注册插件(增强Vue的功能)

之前学习中用到的场景

应用实例

格式Vue.use(obj)

原理:

Vue.use 可以接收一个对象,Vue.use(obj)

对象obj中需要提供一个 install 函数  在main.js

install的参数及执行

定义全局组件的格式

Vue.component('组件名', 组件对象)

在 Vue.use(obj) 时,会自动调用该 install 函数,并传入 Vue构造器


2.具体操作

①创建一个PageTools文件夹并同时创建一个index.vue组件文件

②创建一个专门用来封装组件的文件(提供统一注册的入口文件 )src/componets/index.js

引入组件,提供install函数

③在main.js中注册插件,这里插件包含了文件中注册的所有组件,不是某一个

使用Vue.use()全局注册

你可能感兴趣的:(注册全局组件和局部组件)