项目中用到的知识点之 Mixins (混入) 》 例子学习法则

余小兔
384 阅读3分钟

项目中用到的知识点之 Mixins (混入) 》 例子学习法则

Mixins是什么?

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。官网的话

我自己的理解其实就是Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。

image-20220421171512124

那应该什么时候使用Mixins呢?

  1. 页面的内容不同，但是执行的方法和需要的数据基本一样的话，我们是选择每个都写呢还是提取出公共部分呢？

基础实列:

比如,现在有这么一个需求,就是我们点击学校名称,学生名字的时候弹出来对应的name .这时候我们就可以将公共方法抽离出来,新建一个 mixin 的 js 文件,当然这个名字你可以随便起.

//School组件
<template>
  <div>
    <h2 @click="showName">学校名称:{{ name }}</h2>
    <h2>学校名称:{{ address }}</h2>
  </div>
</template>
​
<script>
export default {
  name: "School",
  data() {
    return {
      name: '兰州大学',
      address: '甘肃省兰州'
    }
  },
  methods: {
    showName() {
      window.alert(this.name);
    }
  }
}
</script>
​
<style scoped>
​
</style>

Student 组件
<template>
  <div>
    <h2 @click="showName">学校姓名:{{ name }}</h2>
    <h2>性别:{{ address }}</h2>
  </div>
</template>
​
<script>
export default {
  name: "Student",
  data() {
    return {
      name: '李银河',
      address: '女'
    }
  },
  methods: {
    showName() {
      window.alert(this.name);
    }
  }
}
</script>
​
<style scoped>
​
</style>

这里就以vue-cli创建的项目来写，可以这样

//把这段代码放在mixinJS文件中
export const mixin = {
    methods: {
        showName() {
            window.alert(this.name);
        }
    }
}
​
// 下面即可使用
// mixins: [变量名]
import {mixin} from "@/mixin";
export default {
  name: "School",
  data() {
    return {
      name: '兰州大学',
      address: '甘肃省兰州'
    }
  },
  mixins: [mixin]
}
​
export default {
  name: "Student",
  data() {
    return {
      name: '李银河',
      address: '女'
    }
  },
  mixins:[mixin]
}
​
​
​

合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合

  1. 数据对象内

mixin的数据对象和组件的数据发生冲突时以组件数据优先

image-20220421173103298

image-20220421173149559

image-20220421173245436

  1. 钩子函数

同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将会在组件自身钩子之前调用。

什么意思呢❓

其实就是钩子不管是mixin文件的还是组件自身的钩子,会先执行mixin文件中的钩子.再执行组件自身中的钩子.

image-20220421173641531

image-20220421173748434

image-20220421173901822

上面的报错信息是因为我为了让大家更好的看明白注释了student组件中的mixins.

全局混入

全局混合被注册到了每个单一组件上。因此，它们的使用场景极其有限并且要非常的小心。一个我能想到的用途就是它像一个插件，你需要赋予它访问所有东西的权限。但即使在这种情况下，我也对你正在做的保持警惕，尤其是你在应用中扩展的函数，可能对你来说是不可知的。

Vue.mixin({
    mounted() {
        console.log("我是mixin");
    }
})
​
new Vue({
    ...
})

再次提醒，小心使用它！那个 console.log将会出现在每个组件上。这种情况还不算坏（除了控制台上有多余的输出），但如果它被错误的使用，你将能看到它会多么的有害。

一个看起来使用合理的例子

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    let myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
​
new Vue({
  myOption: 'hello!'
})

总结

混合对于封装一小段想要复用的代码来讲是非常香的。对大佬你来说它们肯定不是唯一可行的方式。是因为它不需要传递status，但是这种模式也可能会被滥用。所以我们还是需要仔细斟酌使用。>>> 合适的场景用合适的技术才是最重要的。

avatar
文章
阅读
粉丝