文章目录
3.18混入
注意点1：所谓“混入”，就是把vue组件中共同的配置提取出来，单独用一个文件保存，比如叫mixin.js保存配置，使用时引入并配置即可使用。
注意点2：
问题：如何使用混入？
答案：第一步引入，第二步配置mixins。
mixin.js
export const hunhe = {
methods: {
showName(){
alert(this.name)
}
},
mounted() {
console.log('你好啊！')
},
}
export const hunhe2 = {
data() {
return {
x:100,
y:200
}
},
}
组件内使用时引入并配置
import {hunhe,hunhe2} from '../mixin'
export default {
name:'School',
data() {
return {
name:'尚硅谷',
address:'北京',
x:666
}
},
mixins:[hunhe,hunhe2],
}
注意点3：mixin.js中写法export const hunhe = {}，这叫ES模块化的分别暴露。
注意点4：组件中使用混入，需指定mixins:[]，必须为数组才有效。
注意点5：所有的vue的配置项都可以写在“混入”里面。
注意点6：混入文件mixin.js中有一个属性名，而data中未定义相同的属性名，那么值以“混入”中定义的为主，如果mixin.js中和data中有相同属性名，那么以data中配置的数据或方法为主，说白了“混入”不破坏你的代码。
注意点7(特殊情况)：
问题：和注意点6对比，比如“混入”中定义了钩子函数，而data中定义了相同名称的钩子函数，那么以谁为主？
答案：钩子函数会特殊处理，vue不以任何人为主，vue它都要，另外注意加载顺序，“混入”中钩子函数先加载，组件中同名钩子函数后加载。
注意点8：混入有局部混入，还有全局混入
“局部混入”方式，使用mixins:[]
组件中
<script>
//引入一个hunhe
import {hunhe,hunhe2} from '../mixin'
export default {
name:'School',
data() {
return {
...
}
},
mixins:[hunhe,hunhe2],
}
“全局混入”方式，使用Vue.mixin()，注意弊端：Vue.mixin(hunhe)会导致所有的vm、vc都拥有“混入”配置
main.js中
import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
注意点9：使用“混入”步骤还是3步：
- 1）定义，提取成mixin.js文件，放在跟A匹配。App.vue同级别下
- 2）注册，分局部）注册和全局）注册
- 3）main.js中引入
本人其他相关文章链接
1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）
9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）
13.vue2知识点：组件的props属性、非props属性、props属性校验
16.vue2知识点：动态组件
17.vue2知识点：混入
19.vue2知识点：全局事件总线（GlobalEventBus）
23.vue2知识点：路由
25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）
26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习：待办事项Todo-list案例练习
28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/106184.html
