美文网首页
vue 混入 (mixin)

vue 混入 (mixin)

作者: 醉青风 | 来源:发表于2021-08-25 09:28 被阅读0次

    何为混入?

    混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”。但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同的配置项中,有着不同的混入策略。

    为啥要用混入?

    vue中的混入,可以在一定程度上提高代码的复用性。

    开始使用

    全局混入:

    Vue.mixin({
      created: function () {
          console.log('混入进来了')
      }
    })
    

    局部混入:

    var mixin = {
       created: function () {
          console.log('混入进来了')
      }
    }
    export default {
      mixins: [mixin]
    }
    

    混入策略

    我们学会了混入,当然我们需要更好的控制混入的规则就需要学习混入策略

    var mixin = {
        data() {
        return {
         myOption: '混入进来了'
      }
    }
    
    export default {
      mixins: [mixin],
      data() {
        return {
         myOption: '我是组件里面的'
      },
      created: function () {
          console.log(this.myOption) //  混入进来了
      }
    }
    
    Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
        // 返回合并后的值
        return   toVal || fromVal  //当我们混入的值不为空则显示我们混入的值
    }
    

    相关文章

      网友评论

          本文标题:vue 混入 (mixin)

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