vue中mixins属性有什么用

本篇内容介绍了"vue中mixins属性有什么用"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

mixin.js 文件

import {mapGetters, mapMutations, mapActions} from 'vuex'  export const playlistMixin = {  computed: {   ...mapGetters([    'playList'   ])  },  mounted() {   this.handlePlaylist(this.playList)  },  activated() {   this.handlePlaylist(this.playList)  },  watch: {   playList(newVal) {    this.handlePlaylist(newVal)   }  },  methods: {   handlePlaylist() {    throw new Error('component must implement handlePlaylist method')   }  }  }

这个文件就暴露出一个对象，不过这个对象和组件很类似，也就是组件的js代码部分类似。

这个.js文件要做的事情就是，在生命周期中和playList 变量改变的时候触发handlePlaylist 函数，但是这个函数的逻辑是在各自要改变的组件当中去实现。下面看看怎么用Mixin。

import {playlistMixin} from 'common/js/mixin' //引入Mixin  export default {   mixins: [playlistMixin],   methods: {     handlePlaylist (playlist) {     let bottom = playlist.length > 0 ? '60px' : ''     this.$refs.recommend.style.bottom = bottom     this.$refs.scroll.refresh()    },   }  }

在使用的组件中这样调用。

mixins: 这个属性是个数组，也就是说可以加载多个 minxin 文件。

handlePlaylist 方法是完成业务逻辑。所以在组件的生命周期中都会添加 this.handlePlaylist() 方法。

"vue中mixins属性有什么用"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！