插件通常用来为Vue添加全局功能,插件功能范围没有严格的限制---一般有如下几种
1、添加全局方法或者property
2、添加全局资源:指令、过滤器、过渡等
3、通过全局混入来添加一些组件选项。
4、添加Vue实例方法,通过把他们添加到Vue.prototype上实现
5、一个库,提供自己的API , 同时提供上面提到的一个或多个功能
通过全局方法Vue.use()使用插件,它需要你调用new Vue()启动应用之前完成
Vue.use( MyPlugin )
也可以传入一个可选的选项对象
Vue.use(MyPlugin, { someOption : true })
Vue.use会自动阻止多次注册相同的插件,届时即使多次调用也只会注册一次该插件。
Vue.js的插件应该暴露一个install 方法,这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
实例
<template>
<div>
<div class="number-panel">
<el-input v-model="checkedNumber" class="margin_t20" style="width:284px;"></el-input>
<!-- <ul>
<li @click="clickNumberHander($event)" v-for="item in number" :key="item">{{item}}</li>
<li @click="clickNumberHander($event)">0</li>
</ul> -->
<ul>
<li @click="clickNumberHander(item)" v-for="item in number" :key="item">{{item}}</li>
<li @click="clickNumberHander(0)">0</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "my-panel",
data() {
return {
checkedNumber: "",
number: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
mounted() {},
methods: {
clickNumberHander(str) {
//target:目标对象
//currentTarget:绑定事件的对象,恒等于this,
//this.checkedNumber = this.checkedNumber.concat(e.currentTarget.innerHTML);
this.checkedNumber += str
},
myPanelEvent(str){
console.log(str)
}
}
};
</script>
<style scoped>
.el-input{margin-left:20px;}
.number-panel ul {
display: flex;
padding:5px;
width: 284px;
border:1px solid #ccc;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-left:20px;
}
.number-panel ul li {
display: flex;
margin:5px;
/*flex-direction: column;*/
width: 80px;
height: 80px;
background-color: #f9fdf4;
border: 1px solid #ccc;
justify-content: center;
align-items: center;
cursor:pointer;
}
</style>
import panel from './panel.vue'
let test = {}
test.install = function(Vue,options){
Vue.prototype.$msg = "hello I am PANEL.JS"
Vue.prototype.$myMethod = function(arr){
if(arr.length<0){
return false
}else{
arr=arr.join("-")
return arr
}
}
Vue.component(panel.name, panel) // 注册全局组件
}
export default test
import myPluginPanel from "./plugin/panel.js"
Vue.use(myPluginPanel)
vue页面中使用
<my-panel ref="myPanel"></my-panel>
<el-button @click="testPluginEvent">测试插件事件</el-button>
testPluginEvent(){
console.log(this.$msg) // hello I am PANEL.JS // 全局属性
this.$refs.myPanel.myPanelEvent("this is myPanelEvent") // 调用组件的方法 this is myPanelEvent
console.log(this.$myMethod([1,2,3])) // 全局方法 1-2-3
},
总结:
在插件中注册的全局属性和方法在任何vue页面中都可以使用;
如果在插件中注册全局组件可以通过this.$refs[ref].myComponentMethod()调用组件的方法;