0
点赞
收藏
分享

微信扫一扫

vue之Mixins混入

boomwu 2021-09-25 阅读 35
日记本

先阅读vue的官网:https://cn.vuejs.org/v2/guide/mixins.html

Mixins

mixins就是混入。一个混入对象可以包含任意组件选项。

  1. 页面的风格不用,但是执行的方法和需要的数据类似,我们是选择每个都写呢还是提取出公共部分呢?

以vue-cli创建的项目为例,可以这样写:

  • mixin.js
export const circleSwiper = {
  data() {
    return {
       msg : 'hello',
       isshowing: false
    }
  },
  activated() {
    
  },
  methods: {
      toggleShow () {
        this.isshowing = !this.isshowing
      }
  }
}
  • 将mixin.js引入改组件,就可以直接使用toggleShow 方法了,在modal.vue中:
import {circleSwiper} from '@/assets/js/mixins.js'

export default {
    mixins: [circleSwiper],
    mounted () {
        
    }
}

当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。
mixin的数据对象和组件的数据发生冲突时以组件数据优先。

举报

相关推荐

0 条评论