前言
Vue中添加插件最简单的方式,就是直接给Vue添加一个全局的静态方法或变量;
一个Vue项目中,Vue是唯一的,那么给Vue添加的静态方法或变量也是唯一的,并且可以被任何Vue组件使用;
一、创建一个插件
- 创建一个
DateFormatter.js
文件
组件内部实现代码:
import moment from 'moment'
export default function dateFormat(date, format) {
return moment(date).format(format)
}
二、引入插件
- 在
main.js
文件中,引入插件
import dateFormat from './DateFormatter.js'
Vue.dateFormat = dateFormat;
- 使用
Vue.全局方法
,可以给Vue添加全局的方法
三、使用插件
- 使用插件
<script>
import Vue from 'vue'
export default {
name: 'App',
data() {
return {
date: new Date
}
},
computed: {
currentDate() {
// 调用插件
return Vue.dateFormat(this.date, 'YYYY-MM')
}
}
}
</script>
- 使用
Vue.全局方法()
,可以直接调用全局方法;
使用该方法的前提是引入Vue文件
import Vue from 'vue'
四、缺陷
使用全局方法的方式,可以给Vue添加插件,但是在使用的时候,必须每次都需要引入Vue文件(import Vue from 'vue'
),使用起来还是比较繁琐的。
为了简化上一步,我们可以给Vue添加全局的实例方法。> 在纯Vue项目中,
网友评论