• 关于vue混入(mixin)的解读


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

    1.钩子函数

    混入对象的钩子将在组件自身钩子之前调用。

     //  minxin.js
    const mixin = {
      data() {
        return{
          msg1: '我是混入内容1',
          msg2: '我是混入内容2'
        }
      },
      created() {
        console.log(this.msg3)
      }
    }
    export default mixin;
    
    ...
    // 页面组件
    
    
      
        // 我是组件内容2
        // 我是混入内容2
        // 我是组件内容1

    2.普通方法合并

    当混合值为对象的选项时,例如 methods、components、directive,将被混合为同一个对象,两个对象键名冲突时,取组件对象的键值对。

    
        

    3.局部混入

    在componnets目录下新建mixins文件夹,并在mixins目录下创建一个mixin.js文件,代码如下:

    const mixin = {
      data() {
        return {
          msg: "hello"
        }
      },
      methods: {
        mixinMethod() {
          console.log(this.msg + ',这是mixin混入方法')
        }
      }
    }
    export default mixin;

    在需要的页面中引入:

    
    

    vue中mixin混入注意事项

    1.页面和mixin的created都会执行,先执行mixin的,再执行当前页面的;

    2.当前页面可以访问mixin的data和methods;

    3.mixin里的方法可以调用页面的data和methods;

    4.可以在当前页面改变mixin里的data

    注意:当本组件与mixin有同名方法或同名数据时,优先调用本组件的方法或数据,混入的部分失效

  • 相关阅读:
    上周热点回顾(9.12-9.18)
    wxpython:wx.grid 表格显示 Excel xlsx文件
    交错序列——差分:GZOI2023D2T3
    ARM开发初级-STM32时钟系统以及如何正确使用HAL_Delay-学习笔记08
    c语言tips-宏连接
    Android学习之路(19) ListView详解
    MATLAB算法实战应用案例精讲-【智能优化算法】和声搜索算法-HS(附MATLAB、Java和Python代码)
    Redis的高可用集群 完
    java毕业设计茶叶企业管理系统Mybatis+系统+数据库+调试部署
    Linux Shell脚本练习(一)
  • 原文地址:https://blog.csdn.net/qq_41221596/article/details/128162860