Loading

详解 Vue 如何自定义插件

Vue 中使用自定义插件：

定义一个我们的插件 myPlugin.js


(function () {

    const Carver = {};

    Carver.install = function (Vue, options) {
    
        // 1. 添加全局方法或 property
        Vue.myGlobalMethod = function () {
            console.log('I am Vue.myGlobalMethod')
        }

        // 2. 添加全局资源
        Vue.directive('my-directive',function (el,binding){
            console.log('I am Vue.directive')
        })



        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {
            console.log('I am Vue.prototype.$myMethod')
        }
    }

    window.Carver = Carver;

})()

例如：

<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="./myPlugin.js"></script>
</head>
<body style="text-align: center">

    <div id="directive1">
        <p v-my-directive="msg2">你好～{{msg1}}</p>
    </div>
</body>
</html>
<script>

    Vue.use(Carver);//使用自定义的插件（实际调用 `MyPlugin.install(Vue)`）

    Vue.myGlobalMethod();//插件全局方法myGlobalMethod

    let vm = new Vue({
        el:'#directive1',
        data:{
            msg1:'i`m carver1 and i`am a programmer',
            msg2:'I am Carver`s msg2'
        }
    });

    vm.$myMethod();//插件的实例方法$myMethod()

</script>

你需要一杯水，因为你太干了哦

posted @ 2023-02-13 12:37  Carver-大脸猫  阅读(109)  评论(0)  编辑  收藏  举报