Vue-自定义插件

VUE vue

创建时间:2019-12-08 22:47

字数:251 阅读:

自定义插件
1. 插件的作用
2. 演示

自定义插件

插件的作用

插件通常为全局作用,一般添加全局方法/全局指令/全局过滤器
Vue中使用install方法进行全局添加
通过全局方法Vue.use()使用插件

演示

plugin.js

(function () {
    // 声明MyPlugin插件对象
    const MyPlugin = {}
    MyPlugin.install = function (Vue, options) {
        // 添加全局方法
        Vue.myGlobalMethod  = function () {
            alert('MyPlusgin插件全局方法')
        }
        // 添加全局指令
        Vue.directive('my-directive',{
            inserted:function (el, binding) {
                el.innerHTML = "MyPlugin 插件 my-directive:"+binding.value
            }
        })
        // 添加实例方法
        Vue.prototype.$myMethod = function (value) {
            alert('Vue 实例方法myMethod被调用')
        }
    }
    // 将组件添加到window中
    window.MyPlugin = MyPlugin
})()

自定义插件.html

<body>
    <div id="app">
        <span v-my-directive="content"></span>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="plugins.js"></script>
    <script>
        <!-- 引入插件-->
        Vue.use(MyPlugin)
        var vm = new Vue({
            el: "#app",
            data: {
                content: 'hello'
            }
        })
        vm.$myMethod('ttt')
        Vue.myGlobalMethod()
    </script>
</body>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com