Vue中混入（mixin）的使用

Vue中混入（mixin）的使用

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

我的理解
1.一个混入对象可以包含任意组件选项。
在mixin中可定义组件中包含的属性、方法以及生命周期等等
（如：data()、created()、methods）

2.当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
mixin中定义的属性、方法以及生命周期等等在引入组件之后会与组件本身的属性、方法以及生命周期等等进行合并。组件内可以直接调用在mixin中定义的变量及方法。
这个时候就会有一个问题：如果重名谁的优先级更高
在实际操作验证可知：组件内定义的比mixin中定义的变量和方法的优先级高
验证优先级可参考地址：… … … … … … … …

3.混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
mixin可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

官方提供的引入方式有两种：局部混入、全局混入

定义一个mixin

export const mixin = {
  data() {
    return {
      num: 1
    }
  },
  created() {
    this.test()
  },
  methods: {
    test() {
      console.log("hello mixins")
    }
  }
}

1.局部混入

import { mixin } from '@/assets/js/mixin'
export default {
	mixins: [mixin],
}

2.全局混入

import { mixin } from '@/assets/js/mixin'
Vue.mixin(mixin)

最后

以上就是深情海燕为你收集整理的Vue中混入（mixin）的使用的全部内容，希望文章能够帮你解决Vue中混入（mixin）的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。