Vue3全局组件和自定义指令

目录

全局组件

全局指令

局部指令

---

全局组件

全局组件是在main.js中注册的，通过app实例.component创建

main.js

import { createApp } from 'vue'
import App from './App.vue'
//导入组件
import CustormComp from './components/CustormComp.vue'
//  创建App实例挂载到id为app的dom元素
const app=createApp(App)
//注册组件
// 全局组件->相当于vue2的Vue.component()
app.component('CustormComp',CustormComp)

app.mount('#app')

App.vue

局部组件，就是vue的导入注册使用，只不过再setup()语法糖下，不需要注册组件

全局指令

main.js

import { createApp } from 'vue'
import App from './App.vue'

import CustormComp from './components/CustormComp.vue'
const app=createApp(App)

// 注册全局指令
app.directive('color',{
    mounted(el,binding){
        el.style.backgroundColor=binding.value
    },
    updated(el,binding){
        el.style.backgroundColor=binding.value
    }
})


//  钩子函数只用到mounted和updated可以简写为下面的函数
// 假如需要用到其他钩子函数或mounted和updated执行不同逻辑要写成对象

//app.directive('color',(el,binding)=>{
  //  el.style.backgroundColor=binding.value
//})

使用 App.vue

局部指令

App.vue