怎么为Vue编写插件
最近翻了下Element-UI源码,其实很简单,然后自己实现了个,如下。
vue官网有介绍 https://cn.vuejs.org/v2/guide/plugins.html
本例 通过把它们添加到 Vue.prototype 上实现添加插件。
比如 Vue.prototype.$notify = notify
getStart
首先使用vue-cli生成一个项目,命令是:
npm install -g @vue/cli或者 yarn global add @vue/cli,然后创建一个项目,vue create my-notification, 创建完成后npm i 一下,然后npm run dev。
您可以在我的github上clone一下源码。地址戳这https://github.com/yaoqifa/vue-notification-component 记得给个star。
目录结构
代码分析
在components下建了一个notification目录,入口是index.js文件。这里主要导出一个函数
import Notification from './notification.vue'
import notify from './instance'
export default (Vue) => {
Vue.component(Notification.name, Notification)
Vue.prototype.myNotify = notify
}
Vue.component 首先在Vue上注册一个组件,然后将实例属性绑定到Vue.prototype上,这样,在main.js 里引用
import Notification from ‘./components/notification’ 并 Vue.use(Notification)即可在Vue的原型上注册一个myNotify 属性,页面的其它文件里都可通过 this.myNotify({})调用。具体可对应看源码。
我们看到在index.js里import了notification.vue,这个文件就是notificaiton组件的基本结构,p