美文网首页
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 组件的理解

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

  • vue混入mixin

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

  • vue mixin

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

  • vue mixin(混入)

    目的 增强组件功能的可复用性,一个混入对象可以包含任意组件选项

  • vue混入mixin

    mixin主要作用是提取组件中相同的代码,对生命周期、methods、components、data都可以做提取,...

  • Vue混入(mixin)

    理解:一个混入对象可以包含任意组件选项,这些选项将混入到组件本身的选项;作用:用来分发Vue组件中的可服用功能; ...

  • vue 混入 (mixin)

    何为混入? 混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”。但是与继承不同的是,继承一...

  • vue - mixin混入

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

  • Vue mixin 混入

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

  • Vue 之 混入(mixins)

    Vue 之 混入(mixins) 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功...

网友评论

      本文标题:vue 混入 (mixin)

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