Vue3 中注册全局组件与自定义指令

注册全局组件

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> 
复制代码