美文网首页Vue
Vue.js mixin 和 mixins 区别

Vue.js mixin 和 mixins 区别

作者: 波仔_4867 | 来源:发表于2021-12-14 10:05 被阅读0次

mixin ⽤于全局混⼊,会影响到每个组件实例,通常插件都是这样做初始化的,但是这种⽅式会影响到每个组件的 beforeCreate 钩⼦函数

//文档也不建议我们直接使⽤ mixin,我还没用过

mixins 如果多个组件中有相同的业务逻辑, 就可以将这些逻辑剥离出来,通过 mixins 混⼊代码,⽐如上拉下拉加载数据、窗体禁止拖拽。

需要注意的是 mixins 混⼊的钩⼦函数会先于组件内的钩⼦函数执⾏(生命周期),并且在遇到同名选项的时候也会有选择性的进⾏合并。
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。

//用法 就是导出一个模块
//这是一个electron-vue 窗体禁止拖拽 功能
// 全局监听drag和drop事件,当用户拖入一个文件但是又不是拖入可拖拽区域的时候,将其屏蔽掉
// 避免electron应用像浏览器那样,拖入pdf或图片会自动打开
const disDrag = {
    mounted () {
        this.disableDragEvent()
    },
    methods: {
        disableDragEvent () {
            window.addEventListener('dragenter', this.disableDrag, false)
            window.addEventListener('dragover', this.disableDrag)
            window.addEventListener('drop', this.disableDrag)
        },
        disableDrag (e) {
            const dropzone = document.getElementById('upload-area') // 这个是可拖拽的上传区
            if (dropzone === null || !dropzone.contains(e.target)) {
                e.preventDefault()
                e.dataTransfer.effectAllowed = 'none'
                e.dataTransfer.dropEffect = 'none'
            }
        }
    },
    beforeDestroy () {
        window.removeEventListener('dragenter', this.disableDrag, false)
        window.removeEventListener('dragover', this.disableDrag)
        window.removeEventListener('drop', this.disableDrag)
    }
}

export {disDrag};

//接下来就是引入了  如果是vue的话可以直接引入到APP.vue中
//这个方法可是比引入工具函数好用多了吧!可以在不同的生命周期中写逻辑,最最重要的就是引入简单呀!!!
import {disDrag} from "../assets/js/vue_disDrag";

export default {
  mixins:[disDrag],
  name: "test.vue",
  data () {
    return {
      num:0
    }
  },
  mounted() {}

下面说一下合并的情况,我刚才说了默认情况下, mixins将首先被调用, 然后是组件,但是如果你有特殊逻辑,需要用到组件内部的方法时,就跟mixins调用相同的函数,这时候就会合并,结果就是vue实例组件胜出,vue组件的函数会覆盖mixins里的函数。

相关文章

  • Vue.js mixin 和 mixins 区别

    mixin ⽤于全局混⼊,会影响到每个组件实例,通常插件都是这样做初始化的,但是这种⽅式会影响到每个组件的 bef...

  • Vue 混入(mixins和Vue.mixin)

    1.mixins和Vue.mixin mixins 混入 (mixins) 是一种分发 Vue 组件中可复用功能的...

  • jade模板引擎mixins

    mixins基本用法: 带有参数的mixins方法: 带有不定参的mixin方法: 属性传递的mixin方法: J...

  • mixins混合使用

    1.mixin与mixins的区别 mixin是全局注册的。使用时格外小心!一旦使用全局混入,它将影响每一个之后创...

  • TypeScript Mixins 概念介绍

    Mixins[https://www.typescriptlang.org/docs/handbook/mixin...

  • TypeScript10--Mixins混入

    Mixins混入: mixin简单通俗的讲就是把一个对象的方法和属性拷贝到另一个对象上。(这个跟继承还是有区别的,...

  • Vue之mixin和mixins

    mixin初始化:https://www.deboy.cn/Vue-mixins-advance-tips.htm...

  • Vue之mixin和mixins

    mixin 官网上:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对...

  • el-table列表自适应高度

    组件复用mixins: [mixin],: 或者单独组件使用: 传参调用的形式:

  • Vue - Vue.mixin() 和 mixins

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选...

网友评论

    本文标题:Vue.js mixin 和 mixins 区别

    本文链接:https://www.haomeiwen.com/subject/jmsefrtx.html