欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue的mixins属性详解

程序员文章站 2023-12-24 15:52:21
首先先给出官网 今天在开发项目的时候要改变一个标签的属性,因为项目中有多个地方都要改(业务逻辑相同),所以就看有没办法只改变一个地方,把方法加进去,最后找官网就发现这个...

首先先给出官网

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

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

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

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

上一篇:

下一篇: