Vue自定义全局组件(插件)
全局组件: 就是指可以在main.js中使用Vue.use()进行全局引入,然后在其他组件中就可以使用了import VueRouter from 'vue-router'Vue.use(VueRouter)普通组件: 每次使用时都要引入如何自定义全局组件首先写一个组件然后写一个引入文件// index.jsimport componentName from './src/compon
·
- 全局组件: 就是指可以在main.js中使用Vue.use()进行全局引入,然后在其他组件中就可以使用了
import VueRouter from 'vue-router'
Vue.use(VueRouter)
- 普通组件: 每次使用时都要引入
如何自定义全局组件
- 首先写一个组件
- 然后写一个引入文件
// index.js
import componentName from './src/componentName.vue'
export default {
install: (Vue) => {
Vue.component('exportComponentName',componentName)
}
}
- 然后在main.js中就可以这么写了
imoprt exportComponentName from './component/index.js'
Vue.use(exportComponentName)
- 以后就可以直接使用了
如何要添加全局方法,那么可以在Vue.propotype上添加
直接在index.js上书写
export default {
install: (vue) => {
Vue.prototype.actionName = (arguments) => {
// code
}
Vue.prototype.actionName2 = (arguments) => {
// code
}
Vue.prototype.actionName3 = (arguments) => {
// code
}
Vue.prototype.actionName4 = (arguments) => {
// code
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)