Vue(四)——插件

最新推荐文章于 2023-06-01 20:10:57 发布

Jyann~

最新推荐文章于 2023-06-01 20:10:57 发布

阅读量276

点赞数

分类专栏： Vue 前端文章标签： vue Vue插件

本文链接：https://blog.csdn.net/qq_34569497/article/details/112968053

版权

前端同时被 2 个专栏收录

173 篇文章 14 订阅

订阅专栏

Vue

89 篇文章 7 订阅

订阅专栏

插件

插件通常是用来给 vue 提供扩展功能的一种方式

给 Vue 添加属性和方法
给 Vue 实例 添加属性和方法
添加全局资源：指令、过滤器、组件等
添加配置选项

一、自定义实现插件功能

原理：将需要扩展的功能，加到vue组件实例的原型上（prototype）

不推荐使用，因为不规范，所以一些第三方组件组件使用Vue推荐的插件实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="send">按钮</button>
        <kkb></kkb>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        function axios() {
            console.log("axios");
        }

        Vue.prototype.http = axios;

        // Vue.component实质上也是在实例上创建
        const kkb = Vue.component("kkb", {
            template: `
                <div><button @click="post">按钮</button></div>
            `,
            methods: {
                post() {
                    console.log("子组件调用-----");
                    this.http();
                }
            }
        });

        new Vue({
            el: "#app",
            methods: {
                send() {
                    console.log("根组件调用-----");
                    this.http();
                }
            },
            components: {
                kkb
            }
        });
    </script>
</body>

</html>

二、安装插件（四种方式）

通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成

Vue.use(插件);

如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

即如果是install()直接执行这个方法，如果是对象就对象中找到install()方法并执行。

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

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

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

三、实例——axios

axios

https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js

3.1实现方式一：添加实例方法实现

注：不推荐在Vue原型上这样做

function http(_Vue, options) {
  _Vue.prototype.$http = axios;
}

Vue.use(http);

// or

function http(_Vue, options) {
  _Vue.prototype.$http = adaptor.http;
}

Vue.use(http, {adaptor: axios});

new Vue({
  el: '#app',
  data: {
  },
  async created() {
    // let rs = await axios({
    //     method: 'post',
    //     url: 'https://api.apiopen.top/musicRankings'
    // });
    // console.log(rs);

    let rs = await this.$http({
      method: 'post',
      url: 'https://api.apiopen.top/musicRankings'
    });
    console.log(rs);
  }
});

修改 prototype 会修改整个 Vue 原型链

代码实现：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="send">按钮</button>
        <kkb></kkb>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        function axios() {
            console.log("axios");
        }

        // Vue.prototype.http = axios;
        Vue.use(function(Vue, options) {
            Vue.prototype.http = axios;
        });

        // Vue.component实质上也是在实例上创建
        const kkb = Vue.component("kkb", {
            template: `
                <div><button @click="post">按钮</button></div>
            `,
            methods: {
                post() {
                    console.log("子组件调用-----");
                    this.http();
                }
            }
        });

        new Vue({
            el: "#app",
            methods: {
                send() {
                    console.log("根组件调用-----");
                    this.http();
                }
            },
            components: {
                kkb
            }
        });
    </script>
</body>

</html>

3.2Vue.mixin()注入组件选项（实例）实现：

Vue.mixin()回见传入的对象和组件的实例自动进行混合。混合过程中不是进行覆盖，而是重叠，如生命周期，即混合后，混入的方式里有自己的生命周期，根组件也有自己的生命周期，两者都存在，都可执行。

function http(_Vue) {
  _Vue.mixin({
    beforeCreate() {
      if ( this.$options.adaptor ) {
        this.$http = this.$options.adaptor;
      }
      if ( this.$options.parent && this.$options.parent.$http ) {
        this.$http = this.$options.parent.$http;
      }
    }
  });
}

Vue.use(http);

new Vue({
  el: '#app',
  adaptor: axios,
  components: {
    'my-component': myComponent
  }
})

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="send">按钮</button>
        <kkb></kkb>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        function axios() {
            console.log("axios");
        }

        function JQ() {
            console.log("JQ");
        }

        function http(_Vue) {
            // Vue.prototype.http = axios;
            // Vue.use(function(Vue, options) {
            //     Vue.prototype.http = axios;
            // });

            _Vue.mixin({
                beforeCreate() {
                    // 判断根组件有adaptor，就给根组件增加$http方法
                    if (this.$options.adaptor) {
                        this.$http = this.$options.adaptor;
                    }
                    // 其他子组件就判断父级有没有adaptor，如果有，就将父级的$http方法赋给子组件,通过层层递进给子组件赋值
                    if (this.$options.parent && this.$options.parent.$http) {
                        this.$http = this.$options.parent.$http;
                    }
                }
            });
        }

        Vue.use(http);

        // Vue.component实质上也是在实例上创建
        const kkb = Vue.component("kkb", {
            template: `
                <div><button @click="post">按钮</button></div>
            `,
            methods: {
                post() {
                    console.log("子组件调用-----");
                    this.$http();
                }
            },
            beforeCreate() {
                console.log("子组件beforeCreate");
            },
        });

        new Vue({
            el: "#app",
            // 挂载到data里其实也能实现，只是不太好
            // data:{
            //     adaptor: axios
            // },
            methods: {
                send() {
                    console.log("根组件调用-----");
                    this.$http();
                }
            },
            beforeCreate() {
                console.log("根组件beforeCreate");
            },
            components: {
                kkb
            },
            // adaptor: axios
            // 此时如果再想使用一个JQ的插件，直接实例上给出adaptor值即可。后期router,vuex的store都是采用这种方式
            adaptor: JQ
        });
    </script>
</body>

</html>