Vue.use() 一般用来注册插件。如Vue.use(vueRouter)、Vue.user(Vuex)。常常通过这种方式将 Vue传到插件内部，在插件内部将 Vue 构造函数添加原型属性。经常跟 Vue.extend() 搭配着使用。其内部代码如下所示。
Vue.use = function (plugin) {
//installedPlugins表示应注册的插件
var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters，表示除Vue之外的参数
var args = toArray(arguments, 1);
args.unshift(this);//将Vue添加到args中首位
//如果传入的插件有install属性，且其是一个函数
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
plugin.apply(null, args);
}
//将此插件添加到插件列表中
installedPlugins.push(plugin);
return this
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
下面是 Vue.use() 搭配 Vue.extend() 注册一个插件的简单例子。
# 1、定义插件需要用到的组件
// <Modal>用的是iview ui库的组件
<template>
<Modal
v-model="visible"
:closable="false"
footer-hide
:width="350"
:mask-closable="false"
>
<div class="custom-confirm">
<div class="custom-confirm-header">{{title}}</div>
<div class="custom-confirm-body" v-html="content"></div>
<div class="custom-confirm-footer">
<Button @click="handleOk">{{okText}}</Button>
<Button @click="handleCancel">{{cancelText}}</Button>
</div>
</div>
</Modal>
</template>
<script>
export default {
name: 'show-modal',
props: {
title: {
type: String,
default: ''
},
content: {
type: String,
default: '',
},
okText: {
type: String,
default: '确定'
},
cancelText: {
type: String,
default: '取消'
},
ok: {
type: Function,
},
cancel: {
type: Function
}
},
data () {
return {
visible: false,
}
},
methods: {
handleCancel () {
this.visible = false;
this.cancel && this.cancel()
},
handleOk () {
this.visible = false;
this.ok && this.ok()
}
}
}
</script>
<style scoped lang="scss">
.custom-confirm{
margin: -16px;
padding: 20px 0;
&-header{
text-align: center;
color: #333;
font-size: 14px;
font-weight: bold;
}
&-body{
text-align: center;
color: #666;
font-size: 12px;
line-height: 22px;
margin-top: 20px;
padding: 0 65px;
}
&-footer{
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 0 70px;
/deep/ .ivu-btn{
height: 26px;
width: 72px;
color: #ffffff;
font-size: 12px;
background-color: #00BDEC;
}
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
# 2、插件内容的核心代码
import ConfirmModal from './ShowModal.vue';
function confirmModal (component, props, Vue) {
const constructor = Vue.extend(component);
const instance = new constructor({
propsData: props
});
instance.$mount();
document.body.appendChild(instance.$el);
instance.visible = true
return instance
}
export default {
install (Vue) {
Vue.prototype.$ShowModal = props => {
return confirmModal(ConfirmModal, props, Vue)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 3、在入口文件将插件注入全局
//main.js 在程序入口注册
import ShowModal from '@/plugins/ShowModal'
Vue.use(ShowModal)
1
2
3
2
3
# 4、插件的全局使用
this.$ShowModal({
title: '是否保存数据',
content: '您是否要保存卡片布局数据?',
ok: () => {
},
cancel: () => {
//todo
}
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10