Vue学习之混入

文章目录

Vue学习之混入
一、什么是混入？
二、注册混入
三、使用混入
- 1. 局部混入
- 2.全局混入
四、混入的规则
总结

一、什么是混入？

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

其实可以将混入理解为一个公共组件，这个公共组件可以融合到其他组件中。编写代码的时候。可以将组件中相同的部分抽象出来写成一个混入对象，减少代码重复。

二、注册混入

混入对象和组件对象基本是相同，都有data、method和一系列生命周期钩子函数。

 //混入对象let mixin = {//数据data() {return {mixinData: '混入的数据',obj: { name: 'zhangsan', gender: 'male' }}},//生命周期created() {console.log('混入的created')},// 方法methods: {mixinMethod() {console.log('mixinMethod方法')},test() {console.log('混入的Method')}},}

三、使用混入

混入可以由全局混入和局部混入两种方式

1. 局部混入

        let vm = new Vue({el: '#app',//局部混入mixins: [mixin],data: {msg: 'hello',},created() {console.log('Vue的created');},methods: {},})

局部混入是要在一个组件中，用 mixins属性来混入，mixins是一个列表，可以使用多个混入。

2.全局混入

混入也可以全局注册，但是一般不会这么做，因为这样会让每个Vue实例都混入一个对象，应当避免使用。

全局混入：

Vue.mixin(mixin)

四、混入的规则

1.数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。
2.数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。
3.生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。
4.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

总结

总结了在学习Vue时的关于混入的时候，混入是提高可复用性的对象，可混入组件中，让组件能使用混入的属性和方法等