mixin混入

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

// mixin/index.js
import backIcon from '...'
export default {
  data() {
    return {
      moreIcon,
      message: 'hello',
      foo: 'abc'
    }
  },
  methods: {
     // xx
  }
}
// Hello.vue
import mixin from '....../mixin/index.js'
<script>
  export default {
     data() {
        return {
           message: 'goodbye',
           bar: 'def'
        }
     },
     mixins: [mixin], //使用混入对象,可以在这个组件内使用mixin内的选项data,methods......
  }
</script>

特点

1当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。以组件数据优先。
2同名钩子函数将合并为一个数组,因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。
3值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在vue里面,混入(mixin)是一种特殊的使用方式。一个混入对象可以包含任意的组件选项,可根据需求随意“封装”组...
    凌晨的海鸥阅读 2,116评论 0 3
  • 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选...
    Franklin_4a1c阅读 406评论 0 1
  • 混入 我们先来看看vue官方是怎么介绍的 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的...
    德日班勒阅读 10,069评论 0 11
  • 05. mixin【混入】 1.混入的作用 将选项中的某一个或者的多个单独分离出去管理,让职能更加的单一,符合模块...
    Austin_yu阅读 236评论 0 0
  • 听树叶风中低唱 美妙的低吟 微漾在融融月光里 寂静的夜晚 风轻柔地 轻柔地把阵阵馨香传递 长满绿草的山坡之上 风儿...
    原麈阅读 345评论 2 10