1、自定义插件vue-demoPlugin.js
(function (window) { const DemoPlugin = {} DemoPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.demoGlobalMethod = function () { console.log('Vue函数对象的demoGlobalMethod()') } // 2. 添加全局资源,这里添加了个全局指令 Vue.directive('demo-directive', function (el, binding) { el.textContent = 'demo-directive----' + binding.value }) // 4. 添加实例方法 Vue.prototype.$demoMethod = function () { console.log('vm $demoMethod()') } } //向外暴露插件 window.MyDemoPlugin = DemoPlugin })(window)
2、使用自定义插件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义插件</title> </head> <body> <div id="app"> <button @click="clickFunc">按钮</button> <!-- 使用自定义插件的全局指令demo-directive --> <p v-demo-directive="msg"></p> </div> <script src="../js/vue.js" type="text/javascript"></script> <!-- 自定义插必须在vue.js后面引入 --> <script src="../js/vue-demoPlugin.js" type="text/javascript"></script> <script> // 声明使用自定义插件 // 内部会执行DemoPlugin.install方法 Vue.use(MyDemoPlugin); //调用自定义插件的全局方法 Vue.demoGlobalMethod(); const vm = new Vue({ el: "#app", data: { msg: "Hello My Name Is HeHe" }, methods: { clickFunc() { //通过this调用Vue的实例方法 this.$demoMethod(); } } }); //调用Vue的实例方法 vm.$demoMethod(); </script> </body> </html>