vue插件(方法)的编写-Vue.use()

责编:menVScode 2017-12-12 16:13 阅读(1343)

js面向对象中的原型链:http://menvscode.com/detail/59b15b973bb2bd430d7a7e1c

js中面向对象--继承方式/普通函数与构造函数区别:http://menvscode.com/detail/59abd2273bb2bd430d7a7e18

//将插件写在Vue的原型上
Vue.prototype.$custom = "这是自定义的属性"
export default {
        name:'login',
        data(){return {} },
        methods:{
            sendLogin(){
                console.log(this.$custom) // 这是自定义的属性
} } }

暴露出的是对象 { },对象作为插件;对象里面必须是键值对形式,值是一个函数;函数可以接受2个参数:构造函数、传过来的参数

  let obj = {
    install:function(Vue,options){//参数:构造函数、传过来的参数
      Vue.prototype.$abc = '自定义'
      console.log(Vue)
      console.log(options)//{a:1}
    }
  }
  Vue.use(obj,{a:1})
  //Vue.use(obj)//引用插件

案例

let local = {
  save (key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  fetch (key) {
    return JSON.parse(localStorage.getItem(key)) || {}
  }
}

export default {
  install: function (vm) {
    vm.prototype.$local = local
  }
}

引用插件,然后每个组件就能通过 this.$local 来获取其信息。

import Utile from './lib/utils'
Vue.use(Utile)//引用插件

QQ截图20171212170437


标签: 插件 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码