- vue install - 插件的运用
应用一下 Vue 中插件的制作方法。封装的插件需要一个 install 的方法将插件装载到 Vue 上。
创建插件之后，就可以 Vue.use(myPlugin) 来使用了。
vue.use()源码
function initUse (Vue) {
Vue.use = function (plugin) {
var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
var args = toArray(arguments, 1);
args.unshift(this);
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
plugin.apply(null, args);
}
installedPlugins.push(plugin);
return this
};
}
看！在最后调用了 plugin.install 的方法，我们要做的就是处理好这个 install 函数即可~
创建一个 myPlugin.js 文件，这个就是我们编写的插件
import {mapGetters, mapMutations, mapActions} from 'vuex'
import {merge, empty, isJsonStr} from './utils'
export default {
install(Vue, options) {
// 1. 添加全局方法或属性，如: vue-custom-element
Vue.myGlobalMethod = function () {
// 逻辑...
};
// 2. 可以添加全局资源：指令/过滤器/过渡等，如 vue-touch
Vue.directive('touch', {
bind: function () {
},
// 当绑定元素插入到 DOM 中。
inserted: function (el, binding, vnode, oldVnode) {
// 聚焦元素
el.focus();
},
update: function () {
},
componentUpdated: function () {
},
unbind: function () {
}
});
// 3. 注入组件
Vue.mixin({
methods: {
empty(v) {
return empty(v)
},
...mapMutations(['setTest']),
...mapActions(['alert', 'confirm'])
},
filter: {},
computed: {
...mapGetters(['test'])
},
watch: {},
});
// 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现逻辑...
Vue.prototype.$config = function (options) {
return {
Login: 'login'
}
}
}
}
vue mixin
A、单独文件的使用
- 定义mixin.js文件
export default {
data() {
return {
name: 'mixin'
}
},
created() {
console.log('mixin...', this.name);
},
mounted() {},
methods: {}
}
2.在vue中运用mixin
import mixin from '@/mixin'; // 引入mixin文件
export default {
mixins: [mixin]
}
B、在两个不同组件的使用
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]
})
两个组件用可以通过this.msg引用mixins中定义的msg，但是，小编尝试过，两个组件引用的并不是同一个msg，而是各自创建了一个新的msg。如果在组件中定义相同的data，则此处会引用组件中的msg，而非mixins中的。
如果在引用mixins的同时，在组件中重复定义相同的方法，则mixins中的方法会被覆盖。
mixin的合并策略
当混合对象与组件包含同名选项时，这些选项将以适当的策略合并。例如，同名钩子函数被并入一个数组，因而都会被调用。另外，混合的钩子将在组件自己的钩子之前调用。
let mixin={
mounted(){
console.log('mixin say hi')//先输出
},
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('mixin foo()'+this.msg++)
}
}
}
let vm=new Vue({
el:"#app",
data:{
msg: 2
},
mounted: function(){
console.log('app say hi')//后输出
},
methods:{
foo(){
console.log('Parent foo()'+this.msg)
}
}
})
值为对象的选项，如 methods, components 和 directives 将合并到同一个对象内。如果键冲突则组件的选项优先。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // -> "foo"
vm.bar() // -> "bar"
vm.conflicting() // -> "from self"
