vue中的混入功能其最主要的目的是为了提取组件之间的通用代码,维护组件之间的关联,这个功能不会用也不会影响开发,但是如果会用混入,会让开发变得更加的快捷。
混入的四点总结:
第一点:混入仅仅针对组件中的 script 标签所包裹的内容。且本身内容为js相关内容(常用方式)。
代码示例
// mixinTest.js的混入文件内容
export default{
data() {
return {
}},
computed:{
},
methods: {
},
created(){
},
......
}
// .vue的组件内容
<script>
import mixinTest from '../mixinTest.js';
export default{
mixins: [mixinTest],
data() {
return {
}},
computed:{
},
methods: {
},
created(){
},
......
}
可以看出混入的选项内容和组件的script包裹的选项内容其实是一样的。
而在实际的项目中通常混入的内容会被放置在一个.js的文件中表示。
如:
在这里封装了一个分页内容的通用混入模块,通过export default的方式导出这个通用的混入js内容,然后在需要的地方引用并且通过mixins注册即可。
如:
注意:混入仅仅提取script相关的通用代码,与组件的复用还是有很大的区别的。
第二点:混入的使用规则:2点规则(核心)
了解的混入的使用规则决定着一个人是否会用混入这个功能,因此常规规则的了解与记忆是必须的。
需要记住2点规则:
- 混入对象导入到组件中的时候将进行合并操作。如果有名称相同的内容,则以组件的数据优先。否则直接合并两者的内容
如:
// mixinTest.js的混入文件内容
export default{
data() {
return {
message: 'mixin hello',
foo: 'mixin abc'
}
},
methods: {
foo() {
console.log('mixin foo')
},
conflicting() {
console.log('from mixin')
}
}
}
// .vue的组件内容
<script>
import mixinTest from '../mixinTest.js';
export default{
mixins: [mixinTest],
data() {
return {
message: 'goodbye',
bar: 'def'
}
},
methods: {
bar() {
console.log('foo')
},
conflicting() {
console.log('from component')
}
}
}
</script>
// 混入合并的最终结果
/*
<script>
export default{
// 混入的内容将进行合并,并且同名的内容以组件为优先
data() {
return {
message: 'goodbye',
bar: 'def',
foo: 'mixin abc'
}
},
methods: {
bar() {
console.log('foo')
},
foo() {
console.log('mixin foo')
},
conflicting() {
console.log('from component')
}
}
}
</script>
*/
- 混入对象导入到组件中的时候将进行合并操作。如果有同样的生命周期钩子函数,那么两个钩子函数中的内容都将会执行,且混入对象的钩子函数将在组件钩子函数之前调用,两者之间互不影响
// mixinTest.js的混入文件内容
export default{
created(){
let a = 123;
console.log('混入钩子a变量',a);
}
}
// .vue组件中的内容
<script>
import mixinTest from '../mixinTest.js';
export default{
mixins: [mixinTest],
created(){
let a = 456;
console.log('组件钩子a变量',a);
}
}
</script>
// 最终结果
/*
// => "混入钩子a变量 123"
// => "组件钩子a变量 456"
*/
第三点:全局混入:用的少
全局混入可以使用vue.mixin的形式进行注册
Vue.mixin({
created: function () {
console.log("全局混入内容")
}
})
但是不推荐使用全局混入,因为一旦引用所有的组件都将会受到影响。
第四点:自定义选项合并策略:用的少
这个内容用的比较少,特殊情况需要的时候看api即可