likes
comments
collection
share

Vue中的混入mixin使用方法介绍

作者站长头像
站长
· 阅读数 53

定义

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

 个人理解： 就是有很多组件需要同一个方法。同一个变量。做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用，方法也可用，写在周期函数的代码也会执行。

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

使用方法

1. 写一个混入文件（mess.js）

//mess.js

export default {
  data() {
    return {
      message: '我是混入中的变量'
    };
  },
 
  mounted() {
    console.log(this.message)
  }
};

2. 导入混入

（1）局部混入

在需要的组件或者页面引入

<template>
  <div class="top">
    
  </div>
</template>
 
<script>
import mess from '@/mixin/mess';  // 直接引入
export default {
  mixins: [mess],  // 注册
  components: {
 
  },
  data() {
    return {
      shopInfos: [],
      isLoading: false
    };
  },
 
  created() {
    console.log(this.message);  // 这里就可以使用混入对象里的变量
  },
  computed: {
    
  },
  methods: {
    
  }
};
</script>
 
<style lang="scss" scoped>
</style>

（2）全局混入

在main.js加入以下代码

注意：全局混合被注册到了每个单一组件上。它们的使用场景及其有限要小心。

Vue.mixin({
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
})

在组件中直接引用：

<template>
	<div>{{msg}}</div>
</template>
<script>
export default {
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// hello，这是mixin混入的方法
</script>

混入规则

1.钩子函数

混入对象的钩子将在组件自身钩子之前调用。

 //  minxin.js

<script>
const mixin = {
  data() {
    return{
      msg1: '我是混入内容1',
      msg2: '我是混入内容2'
    }
  },
  created() {
    console.log(this.msg3)
  }
}
export default mixin;
</script>



// 页面组件
<template>
  <div class="header">
    <h1></h1>
  </div>
</template>mess
<script>
import mixin from '@/mixin/mixin'
export default {
  mixins: [mixin],
  name: 'Header',
  data(){
    return{
      msg1: '我是组件内容1',
      msg3: '我是组件内容2'
    }
  },
  created() {
      console.log(this.msg2)
      console.log(this.msg1)
  },
}
</script>
  
	// 我是组件内容2
	// 我是混入内容2
	// 我是组件内容1

2.普通方法合并

当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。

<body>
    <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
    var Mixins = {
        methods: {
            mixin: function() {
                console.log('MixinOne')
            },
            mixinTwo: function () {
                console.log('MixinTwo')
            }
        }
    }
    new Vue({
        el: '#app',
        mixins: [Mixins],
        methods: {
            mixin: function () {
                console.log('component')
            }
        },
        mounted() {
            this.mixin()
            this.mixinTwo()
        }
    })
    
	// component
	// MixinTwo
</script>

总结

混入的规则：

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

总结

一般混入都是在单组件内应用比较合适

也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。（不推荐全局引入）

 实际用途包括

  • keep-alive组件记录滚动条位置，回来时跳转到指定滚动位置。
  • keep-alive组件销毁函数
  • 提示框等等

混入在什么情景需要用到？

mixins的作用可能和vuex，公共组件这2有点像

mixins使用：

当我们存在多个组件中的数据或者功能很相近时，就可以使用mixins将公共部分提取出来，通过mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

mixins和vuex的区别：

  • vuex公共状态管理，在一个组件被引入后，如果该组件改变了vuex里面的数据状态，其他引入vuex数据的组件也会对应修改，所有的vue组件应用的都是同一个vuex数据。
  • vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都输入vue组件自身。

mixins和公共组件的区别;

  • 通用的数据和方法，确实可以提出一个通用的组件，由父子组件传参的形式进行分享公用；公共组件最主要的作用还是复用相同的vue组件(有视图，有方法，有状态)
  • 如果只是提取公用的数据或者方法，并且这些数据或者方法，不需要组件间进行维护，就可以使用mixins。(类似于js中封装的一些公用的方法)
转载自:https://juejin.cn/post/7159428344226791461
评论
请登录