• vue 学习笔记-复用-对象混入


    用法:

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

    原则:

    1:值为对象的选项,例如 methodscomponents 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对

    2:同名钩子函数(method里面的不算,算对象选项)将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用

    3:Vue.extend() 方法也按照上述相同的策略进行合并

    var mixin = {
      data: function () {
        return {
          message: 'hello',
          foo: 'abc'
        }
      }
    }
    
    new Vue({
      mixins: [mixin],
      data: function () {
        return {
          message: 'goodbye',
          bar: 'def'
        }
      },
      created: function () {
        console.log(this.$data)
        // => { message: "goodbye", foo: "abc", bar: "def" }
      }
    })

    全局混入:Vue.mixi({});

    混入也可以进行全局注册,他将会影响之后创建的每一个vue实例,使用得当可以为自定义选项注入处理逻辑

    // 为自定义的选项 'myOption' 注入一个处理器。
    Vue.mixin({
      created: function () {
        var myOption = this.$options.myOption
        if (myOption) {
          console.log(myOption)
        }
      }
    })
    
    new Vue({
      myOption: 'hello!'
    })
    // => "hello!"

    谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。

    大多数情况下,只应当应用于自定义选项,就像上面示例一样。

    上述myOption自定义选项合并策略

    自定义选项将使用默认策略,即简单地覆盖已有值。

    Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
      // 返回合并后的值
    }
  • 相关阅读:
    Vulnhub系列:Tomato(文件包含getshell)
    Linux基础之终端、控制台、tty、pty简介说明
    linux服务器之间传输文件的四种方式
    Vulnhub系列:Os-hackNos
    [GXYCTF2019]BabyUpload
    CVE-2018-12613
    [MRCTF2020]Ez_bypass
    [BUUCTF 2018]Online Tool
    [BJDCTF 2nd]fake google
    [网鼎杯 2020 青龙组]AreUSerialz
  • 原文地址:https://www.cnblogs.com/liuguiqian/p/11145938.html
Copyright © 2020-2023  润新知