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即可