插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:
- 添加全局方法或者 property。如:vue-custom-element
- 添加全局资源:指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法,通过把它们添加到
Vue.prototype
上实现。 - 一个库,提供自己的 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中的方法会被覆盖。
合并生命周期
与组件里面的生命周期会进行合并