vue-mixins混入处理

发布时间:2024年01月04日

定义

mixins(混入):一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins 是一个 js 对象,它可以包含我们组件script中的任意功能选项,如:data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中,当组件使用 mixins 对象,所有 mixins 对象的选项都将被扩展到该组件本身的选项中来,这样就可以提高代码的重用性,并易于后期的代码维护。

用法

在src文件夹下创建mixins文件夹,再在文件夹中创建js文件

export default {
  // 此处编写的就是 Vue组件实例的 配置项,通过一定语法,可以直接混入到组件内部
  // data methods computed 生命周期函数 ...
  created () {
    console.log('嘎嘎')
  },
  data () {
    return {
      title: '标题'
    }
  },
  methods: {
    sayHi () {
      console.log('你好')
    }
  }
}

在vue文件中导入

import loginConfirm from '@/mixins/loginConfirm'
export default {
  mixins: [loginConfirm,...]//可以混入多个,后面的优先级更高,会覆盖前面的
}

这样js文件里的数据和方法就混入到了对应的vue文件中

调用

this.title
this.sayHi()

注意点:
1. 如果导入的mixins的js文件 和 组件内,提供了同名的 data 或 methods, 则组件内优先级更高
2. 如果编写了生命周期函数,则mixins中的生命周期函数 和 页面的生命周期函数,会用数组管理,统一执行,不会冲突

文章来源:https://blog.csdn.net/weixin_46479909/article/details/135388971
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。