Vue-mixins

简单介绍

  • 可以把多个组件共有的数据,方法,提取成一个混合文件
  • data中数据自己和混合文件都有时,以自己的数据为主
  • 生命周期还有方法这些都是独立的

全局混合

// 这样引入所有的页面,组件都会使用这个混合
import mixin from './components/mixin/mixin'

Vue.mixin(mixin)

局部混合

// 常用引用方式
// mixin.js

export default {
    data() {
        return {
            mixData: '这是mixin中数据',
            x: 100,
        }
    },
    created () {
      console.log(this.y)
    },
    methods: {
        handleClick() {
            console.log(this.name)
        }
    },
    computed: {
        showNumber() {
            return this.x + this.y
        }
    }
}


// 两个需要引用混合的组件

// Student.vue




// School.vue


你可能感兴趣的