vue中mixins的使用方法和注意地方 |
您所在的位置：网站首页 › 调用js文件中的方法有哪些 › vue中mixins的使用方法和注意地方 |
vue中mixins的使用方法和注意地方
|
一、什么是Mixins？
mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。 二、什么时候使用Mixins？当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。 三、如何创建Mixins？在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象 myMixins.js： // myMixins.js export default { data () { return { num:1 } }, mounted() { this.speak(); }, methods: { speak() { console.log(this.num); }, } } 四、如何在组件中使用Mixins？在需要调用的组件中引入myMixins.js文件，然后在export default 中引入你需要的对象即可 五、Mixins的特点（1）方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。 ① todo.vue：组件1中对num进行+1操作 // todo.vue // 引入 myMixins.js 文件 import {myMixins} from './myMixins'; export default { mixins: [myMixins], data() { return {} }, created() { this.num++ }, }② list.vue 组件2不进行操作 // list.vue import {myMixins} from './myMixins'; export default { mixins: [myMixins], data() { return {} }, }③ 分别切换到两个页面，查看控制台输出 会发现组件1改变了num里面的值，组件2中num值还是混合对象的初始值，并没有随着组件1的增加而改变 （2）引入mixins后组件会对其进行合并，将mixins中的数据和方法拓展到当前组件中来，在合并的过程中会出现冲突，接下来我们详细了解Mixins合并冲突 六、关于Mixins合并冲突（1）值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的 ① 我们在混入对象增加num属性、getDate1方法和getDate2方法 // myMixins.js export const myMixins = { components:{}, data() { return { num: 1, } }, methods: { getDate1() { console.log("num1 from mixins =", this.num ) }, getDate2() { console.log("num2 from mixins =", this.num ) }, } }② 我们在引入了myMixins文件的 todo.vue 组件中，增加num属性、getDate1方法和getDate3方法 // todo.vue import { myMixins } from "./myMixins.js"; export default { mixins: [myMixins], data() { return { num: 18, } }, mounted() { this.getDate1(); this.getDate2(); this.getDate3(); }, methods: { getDate1() { console.log('num1 from template =', this.num) }, getDate3() { console.log('num3 from template =', this.num) }, } }③ 我们会发现，组件中的age覆盖了混合对象的age，todo.vue 组件的getDate1方法覆盖了混合对象的getDate1方法 （2）值为函数(created、mounted)的选项，混入组件时选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用 myMixins.js 中的console： // myMixins.js export const myMixins = { components:{}, data() { return {} }, created() { console.log('hello from mixin') }todo.vue 中的 console // todo.vue import { myMixins } from "./myMixins.js"; export default { mixins: [myMixins], data() { return {} }, created() { console.log('hello from self') } }控制台打印 当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下： Mymixins.js文件中 // myMixins.js export const myMixins = { components:{}, data() { return { num: 1, } }, methods: { getDate1() { new Promise((resolve,reject) => { let a = 1; setTimeout(() => { resolve(a) },500) }).then(res => { console.log(res,'res'); return res }) }, } }todo.vue 文件中 // todo.vue import { myMixins } from "./myMixins.js"; export default { mixins: [myMixins], data() { return {} }, mounted() { console.log(this.getDate1,'template1-func_one') } }
Mymixins.js文件中 // 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 }, } }todo.vue 文件中 // todo.vue import { myMixins } from "./myMixins.js"; export default { mixins: [myMixins], data() { return {} }, mounted() { this.getDate1().then(res => { console.log(res,'template1-res') }) } }
|
解决方案：不要返回结果而是直接返回异步函数
【本文地址】
今日新闻 |
推荐新闻 |