mixin混入

mixin混入,听着名字感觉是什么很不好理解的东西,其实混入很简单

作用:混入其实就是一个js对象,来分发 Vue 组件中的可复用功能

vue文件中中就是export default{},混入其实就是这个东西,包含了里面的所有东西data、methods、created...

使用:在src文件夹中创建一个mixin的文件夹,里面就可以存放各种混入的对象的的文件。

混入文件formBtnContent.js,里面定义了两个公共的方法

export default {
  methods: {
    //重置搜索表格
    resetBtnClick() {
      this.$refs.pageContent.getDataList()
    },
    //点击搜索
    searchBtnClick(searchInfo) {
      this.$refs.pageContent.getDataList(searchInfo)
    },
  }
}

在需要使用这两个方法的地方加入这两行代码这两个方法就混入到这个文件中了,不需要在这个文件中单独写这两个方法了,如果很多地方用到这两个方法,就可以通过这两行代码代替,这就是混入的好处

局部混入
image

如果要使用全局混入

//Vue.mixin(混入的对象)
Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})

当遇到命名冲突时,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。同名钩子函数将合并为一个数组,就是data里面的属性会以组件中的为准,方法会进行合并

posted @   嘿!那个姑娘  阅读(123)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示