插件,通常用来为Vue 添加全局功能。
引用官方文档Vue插件
使用插件
通过全局方法
Vue.user()
使用插件。它需要在价钱调用new Vue()
启动应用之前完成
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
// ...组件选项
})
也可以传入一个可选的选项对象
Vue.use(MyPlugin, { someOption: true })
开发插件
Vue.js 的插件应该暴露一个
install
方法。这个方法的第一个参数是Vue
构造器,第二个参数是一个可选的选项对象
MyPlugin.install = function (Vue, option) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3.注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
自己创建一个组件
引用Vue的全局组件
- 先创建一个组件
loading.vue
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data() {
return {
msg:'loading......'
}
}
}
</script>
- 在组件的同级目录下,再创建一个
index.js
文件
import LoadingComponents from './loading.vue';
// 1. 安装,输出对象,有属性`install`
const loading = {
install:function(Vue) {
Vue.component('Loading', LoadingComponents)
}
}
export default loading;
// 2. 安装,直接输出方法
// export default function(Vue) {
// Vue.component('Loading', LoadingComponents)
// }
- 引入组件(插件),使用
Vue.use()
import Vue from 'vue'
import App from './App.vue'
import loading from './components/loading/'
Vue.use(loading);
new Vue({
el: '#app',
data:{
eventHub: new Vue()
},
render: h => h(App)
})
网友评论