vue插件

最新推荐文章于 2024-05-30 21:53:41 发布

qyszy123

最新推荐文章于 2024-05-30 21:53:41 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qyszy123/article/details/127334817

版权

一，插件的作用

插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等
Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.

二，创建插件

目录下创建 js 目录，在 js 目录建一个 myplugin.js 文件
创建插件对象： const MyPlugin = {};
向Vue暴露install方法
将插件添加到 window 对象中

(function() {
    //声明
    const MyPlugin = {};
    MyPlugin.install = function (Vue, options) {
        //定义一个全局方法
        Vue.myGlobalMethod = function () {
            alert('MyPlugin插件: 全局方法生效');
        }
 
        //定义一个实例方法，可以理解为全局方法 就是面向对象里的类静态方法
        //下面的实例方法就是这个类里的普通方法，只要对象可以调用
        Vue.prototype.$myMethod = function (methodOption) {
             alert('Vue 实例方法生效：' + methodOption) 
        }
 
    }

最后在html里调用，测试代码如下：

Vue.myGlobalMethod()

vm.$myMethod('mengxuegu')

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <!-- 引用指令时不要少了 v- --> 
        <span ></span>
    </div>
 
 
 
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./js/myplugin.js"></script>
    <script>
        Vue.use(MyPlugin)
        let vm = new Vue({
            el: "#app",
            data: {
                content: "hello"
            },
 
        })
        Vue.myGlobalMethod()
        vm.$myMethod('mengxuegu')
    </script>
</body>
 
</html>