vue mixins使用总结
基础:一、局部混入:1)、混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。2)、选项合并当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。①:新建minxins.js文件/
·
基础:
一、局部混入:
1)、混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
2)、选项合并
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。
比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
①:新建minxins.js文件
//minxins.js 文件
export default{
data(){
return{
message:'混入对象',
foo:'foo'
}
}
}
②:使用组件:
//组件
import minxins from "./common/minxins";
export default{
mixins: [Drugs,minxins],//混入多个文件的写法
data(){
return{
message:'使用混入对象的组件',
bar:'bar',
}
},
mounted() {
console.log(this.message) // 使用混入对象的组件 //发生冲突时以组件数据优先
console.log(this.$data) //{ message: "使用混入对象的组件", foo: "foo", bar: "bar" }
},
}
3)、同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
//minxins.js 文件
export default{
data(){
return{
message:'混入对象',
foo:'foo'
}
},
created(){
console.log('混入对象的钩子先被调用')
}
}
//组件
import minxins from "./common/minxins";
export default{
mixins: [Drugs,minxins],//混入多个文件的写法
data(){
return{
message:'使用混入对象的组件',
bar:'bar',
}
},
created(){
console.log('组件钩子被调用')
},
}
// 控制台结果:
// 混入对象的钩子先被调用
// 组件钩子被调用
4)、值为对象的选项,例如 methods
、components
和 directives
,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
//minxins.js
export default {
data() {
return {
message: '混入对象',
}
},
created() {
this.bar() //可调用组件中的方法 也可获取组件中的对象
},
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
//组件
import minxins from "./common/minxins";
export default{
mixins: [minxins],
data(){
return{
message:'使用混入对象的组件'
}
},
created(){
this.foo();
this.bar();
this.conflicting();
},
methods:{
bar() {
console.log("bar");
},
conflicting() {
console.log("from com");
},
}
// 控制台结果:
//bar
//foo
//bar
//from com
注:混入对象中、组件中的方法都可互相调用;对象可互相获取;Vue.extend()
也使用同样的策略进行合并。
二、全局混入:
1)、在main.js中定义mixin,在需要的使用的页面直接使用,不需要再引入(使用方法同局部混入)
//main.js 中
//方式一
Vue.mixin({
data(){
return{
globalMix:'globalMix'
}
},
methods:{
hello(){
console.log('hello,globalMix')
}
}
})
//方式二
// main.js
import mixin from '自己的文件路径/mixin';
Vue.mixin(mixin);
更多推荐
已为社区贡献6条内容
所有评论(0)