vue混入比较简单,但是在vue2做大一点的项目的时候还是比较重要的技巧,所以还是记录一下

混入mixins可以在组件中导入别的js文件中export出来的东西

举个例子,比如说有个外卖的app,把食物商品相关的信息和方法都写在了food.js中,把配送相关的信息和方法都写在了trans.js中,那么我们就可以直接在需要用到这两部分内容的组件中混入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
import food from '@/mixin/food'
import trans from '@/mixin/trans'

export default {
name: 'Home',
data: function () {
return {
msg: "hello"
}
},
mixins: [food, trans]
}
</script>

而在food.js或者trans.js中书写的格式和普通的组件中export的内容相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// food.js
export default {
data:function(){
return {
//...
}
},
computed: {
//...
},
methods:{
//...
}
}

混入等价于将这些js中的内容直接写在组件中,所以如果有同名字的数据,本质上是同一份,并且写在当前组件中的优先级比较高