vue的mixins属性详解

2019-11-19 14:10:25

字体：大中小

来源：转载

供稿：网友

首先先给出官网 https://vuejs.org/v2/guide/mixins.html

今天在开发项目的时候要改变一个标签的属性，因为项目中有多个地方都要改(业务逻辑相同)，所以就看有没办法只改变一个地方，把方法加进去,最后找官网就发现这个属性。

下面是我的-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() 方法。

这样就可以减少一部分代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue2.0模拟锚点的实例

下一篇：vue2.0路由切换后页面滚动位置不变BUG的解决方法