vue的mixins属性详解

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

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

下面是我的-mixin.js 文件

rush: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。

0 ? '60px' : '' this.$refs.recommend.style.bottom = bottom this.$refs.scroll.refresh() },} }

在使用的组件中这样调用

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

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

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

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

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...