vue2知识点：混入mixins_混入

文章目录

  • ​​3.18混入​​
  • ​​本人其他相关文章链接​​

3.18混入

vue2知识点：混入mixins_混入_02

注意点1：所谓“混入”，就是把vue组件中共同的配置提取出来，单独用一个文件保存，比如叫mixin.js保存配置，使用时引入并配置即可使用。

注意点2：

问题：如何使用混入？

答案：第一步引入，第二步配置mixins。

mixin.js

export const hunhe = {
  methods: {
    showName(){
      alert(this.name)
    }
  },
  mounted() {
    console.log('你好啊！')
  },
}
export const hunhe2 = {
  data() {
    return {
      x:100,
      y:200
    }
  },
}

组件内使用时引入并配置

import {hunhe,hunhe2} from '../mixin'

export default {
    name:'School',
    data() {
      return {
        name:'尚硅谷',
        address:'北京',
        x:666
      }
    },
    mixins:[hunhe,hunhe2],
  }

注意点3：mixin.js中写法export const hunhe = {}，这叫ES模块化的分别暴露。

注意点4：组件中使用混入，需指定mixins:[]，必须为数组才有效。

注意点5：所有的vue的配置项都可以写在“混入”里面。

注意点6：混入文件mixin.js中有一个属性名，而data中未定义相同的属性名，那么值以“混入”中定义的为主，如果mixin.js中和data中有相同属性名，那么以data中配置的数据或方法为主，说白了“混入”不破坏你的代码。

注意点7(特殊情况)：

问题：和注意点6对比，比如“混入”中定义了钩子函数，而data中定义了相同名称的钩子函数，那么以谁为主？

答案：钩子函数会特殊处理，vue不以任何人为主，vue它都要，另外注意加载顺序，“混入”中钩子函数先加载，组件中同名钩子函数后加载。

注意点8：混入有局部混入，还有全局混入

“局部混入”方式，使用mixins:[]

组件中
<script>
  //引入一个hunhe
  import {hunhe,hunhe2} from '../mixin'

  export default {
    name:'School',
    data() {
      return {
        ...
      }
    },
    mixins:[hunhe,hunhe2],
  }

“全局混入”方式，使用Vue.mixin()，注意弊端：Vue.mixin(hunhe)会导致所有的vm、vc都拥有“混入”配置

main.js中

import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

注意点9：使用“混入”步骤还是3步：

  • 1）定义，提取成mixin.js文件，放在跟A匹配。App.vue同级别下
  • 2）注册，分局部）注册和全局）注册
  • 3）main.js中引入