美文网首页
Vue 插件

Vue 插件

作者: gsunneverdie | 来源:发表于2020-04-24 01:22 被阅读0次

    插件,通常用来为Vue 添加全局功能。
    引用官方文档Vue插件

    使用插件

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

    // 调用 `MyPlugin.install(Vue)`
    Vue.use(MyPlugin)
    
    new Vue({
      // ...组件选项
    })
    

    也可以传入一个可选的选项对象

    Vue.use(MyPlugin, { someOption: true })
    

    开发插件

    Vue.js 的插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象

    MyPlugin.install = function (Vue, option) {
      // 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) {
        // 逻辑...
      }
    }
    

    自己创建一个组件

    引用Vue的全局组件

    1. 先创建一个组件loading.vue
    <template>
        <div>
            {{msg}}
        </div>    
    </template>
    <script>
    export default {
        data() {
            return {
                msg:'loading......'
            }
        }
    }
    </script>
    
    1. 在组件的同级目录下,再创建一个index.js文件
    import LoadingComponents from './loading.vue';
    
    // 1. 安装,输出对象,有属性`install`
    const loading = {
        install:function(Vue) {
            Vue.component('Loading', LoadingComponents)
        }
    }
    export default loading;
    
    // 2. 安装,直接输出方法
    // export default function(Vue) {
    //   Vue.component('Loading', LoadingComponents)
    // }
    
    1. 引入组件(插件),使用Vue.use()
    import Vue from 'vue'
    import App from './App.vue'
    import loading from './components/loading/'
    
    Vue.use(loading);
    
    new Vue({
      el: '#app',
      data:{
        eventHub: new Vue()
      },
      render: h => h(App)
    })
    

    相关文章

      网友评论

          本文标题:Vue 插件

          本文链接:https://www.haomeiwen.com/subject/rvmtwhtx.html