一. 使用Vue.mixin() 可以把你创建的自定义方法混入所有的 Vue 实例。
例如下列代码:所有的 Vue 实例的 created 方法都被改成了我们自定义的方法
1.全局混入
Vue.mixin({
created: function(){
console.log("success")
}
})
2.在组件内混入
2.1. 在utils文件夹下定义mixin.js,记住他可以拥有vue实例的各种属性和方法
export default {
data () {
return {
initData: 'mixin初始数据'
}
},
mounted () {
console.log('minxin的挂载输出')
},
methods: {
doubleNum(num){
return num*2
}
}
}
2.2 在组件内引用
<template>
<div>
<h1>{{ name }}</h1>
<h2>{{ initData }}</h2>
<h3>{{ num }}</h3>
<h4>{{ mixinNum }}</h4>
</div>
</template>
<script>
import mixin from '../utils/minxin';
export default {
mixins: [mixin],
data () {
return {
name: '混入组件',
num: 10,
// initData: '组件初始数据',
mixinNum: this.doubleNum(10)
}
},
mounted () {
console.log("Hunru组件的挂载输出");
},
}
</script>
- 创建一个 utils.js 文件,将其暴露出去
// 格式化时间
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null;
}
const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
let date;
if (typeof time === "object") {
date = time;
} else {
if (typeof time === "string" && /^[0-9]+$/.test(time)) {
time = parseInt(time);
}
if (typeof time === "number" && time.toString().length === 10) {
time = time * 1000;
}
date = new Date(time);
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
};
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key];
// Note: getDay() returns 0 on Sunday
if (key === "a") {
return ["日", "一", "二", "三", "四", "五", "六"][value];
}
if (result.length > 0 && value < 10) {
value = "0" + value;
}
return value || 0;
});
return time_str;
}
2.再创建一个 plugin.js 文件,用于保存所有的自定义函数
2.1 插件格式
// 插件
const plugin = {
install(){
document.write('我是install内的代码')
}
}
// 初始化插件
Vue.use(plugin); // 页面显示"我是install内的代码"
tips:官方文档明确表示了如果插件是一个install对象,那么你就必须提供install这个方法,那么在Vue.use()引入的时候就自然而然会去调用这个install方法了.
2.2 编写插件
import {parseTime} from './utils';
const plugin = {
install:(Vue)=>{
Vue.mixin({
filters:{
$format:(value)=>{
return parseTime(value)
}
}
}
}
export default plugin
2.2.1 我们也可以通过添加到vue原型链上的方式使用
const plugin = {
install:(Vue)=>{
Vue.prototype.$tools = tools
}
}
export default plugin
3.在 main.js 文件中使用 Vue.use() 来完成插件的装载
import plugin from "./plugin "
Vue.use(plugin)