注册全局组件
Vue3注册全局组件方式:
1.引入封装好的全局组件地址
import 组件名 from './地址' //一般放置在./src/components下
2.导出
exports default{
install (app) {
// 此处形参为main.js文件中use()方法自动传进来的Vue实例
app.component('自定义组件名,最好与组件内的name一致', 组件名)
}
}
3.main.js中挂载到Vue实例中
import { createApp } from 'vue'
import App from './App.vue' //vue3中引入Vue实例方式
import component from './components'// 引入公共组件
// 链式添加一项 .use(component) 来引入配置好的公共组件
createApp(App).use(component).mount('#app')
4.使用
<自定义组件名 />
复制代码
Vue2注册全局组件方式:
1.引入封装好的全局组件地址
import 组件名 from './地址'
import Vue from 'vue'
2.导出
const component = {
install (Vue) {
// 此处形参为main.js文件中use()方法自动传进来的Vue实例
Vue.component('自定义组件名,最好与组件内的name一致', 组件名)
}
}
// 全局注册组件
Vue.use(component)
3.main.js中进行引入
+ import './components'// 引入公共组件
4.使用
<自定义组件名 />
复制代码
通过对比两种方式并无太大区别
自定义指令
与注册全局组件相似
1.创建文件并导出配置
export default {
install(app){
app.directive('自定义指令名',{ //在创建自定义名称时不要带v-,使用时再携带
mounted(el,binding){
// el 为携带自定义指令的dom节点
// binding 为指令后携带的参数通过.value取出
功能
}
})
}
}
2.main.js文件中注册
import direction from './directives'
createApp(App).use(directive).mount('#app')
3.全局使用
<div v-自定义指令名='...'></div>
复制代码