Vue3 creates global properties and methods

filter filter is cancelled in vue3. If the component is used alone, it can be replaced with computed and watch. But if we want to globally create a filter in the previous vue2, we have to use attributes or methods that are hung in the vue global.

1. Open the main.js file and write your own global attributes or methods.

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import './assets/scss/global.scss'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
// 开始
const app = createApp(App)
// 创建方法
const dateTimeSub = (value) => {
  if (value) {
    return value.split(' ')[0]
  }
}
// 挂在全局方法
app.config.globalProperties.$filters = dateTimeSub
// 主意这里改为app.use
app.use(store).use(router).use(ElementPlus).mount('#app')

2, use

// 引入getCurrentInstance
import { reactive, ref, getCurrentInstance } from 'vue'

setup (props, {emit}) {
    // 获取全局属性和方法
    const { ctx, proxy } = getCurrentInstance()
    // ctx和proxy都可以访问到定义的全局方法，但是ctx只能在本地使用，线上环境使用proxy
    ...
    
    return {
      proxy
    }

<template>
  <div>{{proxy.$filters('2020-06-22 10:55')}}<div>
</template>