Vue 自定义插件demo

1.新建plugins.js文件

(function () {
    const MyPlugin = {}
    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或 property
        Vue.myGlobalMethod = function () {
            // 逻辑...
            alert('全局方法被调用-myGlobalMethod');
        }

        // 2. 添加全局指令
        Vue.directive('my-directive', {
            bind(el, binding, vnode, oldVnode) {
                // 逻辑...
            },
            inserted(el, binding) {
                el.innerHTML = 'MyPlugin.install-my-directive指令被调用了' + binding.value
            }
        })

        // 3. 注入组件选项
        Vue.mixin({
            created: function () {
                // 逻辑...
            }
        })

        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (value) {
            // 逻辑...
            alert("VUE 实例方法被调用了" + value)
        }
    }
    window.MyPlugin = MyPlugin
})()

　　2. 调用插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-my-directive="content"></p>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./plugins.js"></script>
    <script>
        //1. 引入插件
        Vue.use(MyPlugin)
        var vm=new Vue({
            el:'#app',
            data:{
                content:'hello'
            }
        })
        //调用插件中的实例方法
        vm.$myMethod('test')

        //调用全局反复，注意是Vue进行调用，不是vm
        Vue.myGlobalMethod()
    </script>
</body>
</html>

　　

posted on 2021-06-05 15:15  水行者  阅读(104)  评论(0)  编辑  收藏  举报

导航