1.component 定义全局组件(详细)

在main.js 文件中映入组件并全局注册组件

格式:

Vue.component(‘组件名’, 组件对象)

基本示例-定义全局组件:

import Vue from 'vue' // 主要的Vue
//import 自定义组件名 from '组件地址'
import PageTools from '@/components/PageTools' // 导入需要注册的组件
Vue.component('PageTools', PageTools) // 全局注册组件

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

使用全局组件:

 <!-- 全局组件直接输入自定义的标签名直接使用 -->
<PageTools></PageTools>




2.use注册全局组件

官方解释用法:安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

平时使用就有用过use:

  1. Vue.use(VueRouter)
  2. Vue.use(Vuex)
  3. Vue.use(vant)
  4. Vue.use(ElementUI)
格式:

Vue.use(obj)

 说明:
  1. Vue.use 可以接收一个对象,Vue.use(obj)
  2. 对象obj中需要提供一个 install 函数
  3. 在 Vue.use(obj) 时,会自动调用该 install 函数,并传入 Vue构造器


(1)在main.js中-install的参数及执行:

  像VueRouter,Vuex 这些插件都是内部进行封装了的,所以直接可以use进行全局注册

const MyPlugin = {
	install(Vue) {
		console.log('install.....', Vue) 
   		Vue.component('PageTools', PageTools) // 全局注册组件
  }
}
Vue.use(MyPlugin)

(2)提供统一注册的入口文件 :
  在上面看来貌似 use 注册组件更加复杂了;诶!当要全局注册的组件有十几二十个use就用上了,把use需要的obj对象给他拎出来。

  1. 注册全局入口文件 (我这里就是在: src/componets/index.js )
//这里是use全局入口文件
import PageTools from './PageTools'  // 导入PageTools组件
import NavBar from './NavBar'  // 导入PageTools组件
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools) // 注册组件
    Vue.component('NavBar ', NavBar) // 注册组件
  }
}
  1. .在main.js中注册插件
import Components from './components' // 导入全局入口文件
Vue.use(Components) // 注册全局入口文件里的全部组件

注:其实elementUI的全局引入方法就是相同的逻辑

Logo

前往低代码交流专区

更多推荐