Vue 全局组件注册两种方法 component 与use
1.component 定义全局组件在main.js 文件中映入组件并全局注册组件格式:Vue.component(‘组件名’, 组件对象)基本示例-定义全局组件:import Vue from 'vue' // 主要的Vue//import 自定义组件名 from '组件地址'import PageTools from '@/components/PageTools' // 导入需要注册的组件V
·
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:
- Vue.use(VueRouter)
- Vue.use(Vuex)
- Vue.use(vant)
- 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对象给他拎出来。
- 注册全局入口文件 (我这里就是在: 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) // 注册组件
}
}
- .在main.js中注册插件
import Components from './components' // 导入全局入口文件
Vue.use(Components) // 注册全局入口文件里的全部组件
注:其实elementUI的全局引入方法就是相同的逻辑
更多推荐
已为社区贡献2条内容
所有评论(0)