Vue中mixins混入的介绍和使用详解

// 在 myMixins.js 中定义一个 age 字段和 getAge 方法,用来获取年龄信息
export const myMixins = {
  data() {
    return {
      age: 18,
    }
  },
  mounted() {
    this.getAge()
  },
  methods: {
    getAge() {
      console.log(this.age)
    }
  }
}

// 在第一个组件中引入 mixins，并且对 age 加1 
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    this.age++
  },
}
// 发现控制台输出 19，说明当前组件的 age 变化了 

// 在第二个组件中引入 mixins，但是不做任何处理
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
}
// 发现控制台输出 18，说明当前组件的 age 无影响

// 混入myMixins.js对象中增加age属性、getAge1方法、getAge2方法
export const myMixins = {
  components:{},
  data() {
    return {
      age: 18,
    }
  },
  methods: {
    getAge1() {
      console.log("age1 from mixins", this.age )
    },
    getAge2() {
      console.log("age2 from mixins", this.age )
    },
  }
}

// 组件中自带age属性、getAge1方法、getAge3方法；同时引入 mixins。
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {
      age: 20,
    }
  },
  mounted() {
    this.getAge1();
    this.getAge2();
    this.getAge3();
  },
  methods: {
    getAge1() {
      console.log('age1 from template', this.age)
    },
    getAge3() {
      console.log('age3 from template', this.age)
    },
  }
}
// 输出控制台发现，组件中的age覆盖了混合对象的age，组件的getAge1方法覆盖了混合对象的getAge1方法
// age1 from template 20
// age2 from mixins 20
// age3 from template 20

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {}
  },
  created() {
    console.log('data from mixins')
  }
}
// 组件中引入 mixins
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log('data from template')
  }
}
// 先输出混入对象的值，再输入组件的值
// data from mixins
// data from template

// myMixins.js 中直接返回异步函数
export const myMixins = {
  components:{},
  data() {
    return {
      num: 1,
    }
  },
  methods: {
   async getDate1() {
      let result = await new Promise((resolve,reject) => {
          let a = 1;
          setTimeout(() => {
            resolve(1)
          },500)
       })
       return result
    },
  }
}
// 组件中获取混入的异步函数，通过then 方法获取函数值。
import { myMixins } from "./myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  mounted() {
    this.getDate1().then(res => {
      console.log(res)
    })
  }
}