vue3创建全局属性和方法
vue3中取消了过滤器filter,如果组件中单独使用可以用computed、watch来替换。但是想全局创建一个之前的vue2中的filter,我们就要使用在vue全局中挂在属性或者方法。
1、打开main.js文件,写入自己的全局属性或者方法。
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、使用
// 引入getCurrentInstance
import { reactive, ref, getCurrentInstance } from 'vue'
setup (props, {emit}) {
// 获取全局属性和方法
const { ctx, proxy } = getCurrentInstance()
// ctx和proxy都可以访问到定义的全局方法,但是ctx只能在本地使用,线上环境使用proxy
...return {
proxy
}
【vue3创建全局属性和方法】
文章图片
{{proxy.$filters('2020-06-22 10:55')}}
推荐阅读
- django-前后端交互
- IDEA|IDEA 创建工程
- 创建缔造完美教室,让每一间教室都闪闪发光
- Servlet原理|Servlet原理 二(Web应用与创建Servlet实例)
- 企业为什么要融资
- 热点文章|鸢尾花预测(如何创建机器学习Web应用程序())
- 诚实表达,创建连接维护界限
- 06|06 | 全局锁和表锁 (给表加个字段怎么有这么多阻碍((待评论)))
- FTP创建
- 脚手架工具,Yeoman