Vue文档 插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:

  1. 添加全局方法或者 property。如:vue-custom-element
  2. 添加全局资源:指令/过滤器/过渡等。如 vue-touch
  3. 通过全局混入来添加一些组件选项。如 vue-router
  4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

Vue.use()

它需要在你调用 new Vue() 启动应用之前完成:

有些组件经常会用这个去注册

主要因为其中注册的组件都有一个叫 install 的方法

Vue.use 会自动阻止多次注册相同插件

Vue.use()会默认调用这个方法去注册,同时传一个 Vue 这个类的参数。

// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading={
    // install 是默认的方法。当外界在 use 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。
    install:function(Vue){
        Vue.component('Loading',LoadingComponent)
    }
}
// 导出
export default Loading

Vue.mixin()

vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。

组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            console.log('hello from mixin!----'+this.msg++)
        }
    }
}
var child=Vue.component('child',{ 
        template:`<h1 @click="foo">child component</h1>`, 
        mixins:[mixin]
})
Vue.component('kid',{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

但引入的都是开辟独立空间的一块内存,所以不会共用,类似把有相同的方法和属性共享写出去。

方法的覆盖

如果在引用mixins的同时,在组件中重复定义相同的方法,则mixins中的方法会被覆盖。

合并生命周期

与组件里面的生命周期会进行合并