• 这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

混入

基础

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

var minxin = {
  created () {
    this.hello();
  },
  methods: {
    hello () {
      console.log('hello，我是混入中的函数');
    },
  }
}

Vue.component('my-cmp', {
  mixins: [mixin],
  template: `
    <div>xx</div>
  `
})

选项合并

当组件和混入对象含有同名选项时，这些选项会以恰当的方式进行“合并”。

合并数据，以组件数据优先：

var mixin = {
  data () {
    return {
      msg: 'hello',
    }
  }
}
new Vue({
  mixins: [mixin],
  data: {
    msg: 'goodbye',
  },
  created: function () {
    console.log(this.msg)
})

合并钩子函数，将合并为一个数组。先调用混入对象的钩子，再调用组件自身钩子。

var mixin = {
  created () {
    console.log('混入对象钩子')
  }
}

new Vue({
  el: '#app',
  mixins: [mixin],
  created () {
    console.log('组件钩子')
  }
})

合并值为对象的选项，如 methods、components 等，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

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

new Vue({
  myOption: 'hello!'
})

谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项。

自定义指令

简介

我们可以自己写一个自定义指令去操作DOM元素，以达到代码复用的目的。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

全局注册指令：

Vue.directive('focus', { /** */ })

局部注册指令

const vm = new Vue({
  el: '#app',
  directives: {
    focus: { /** */ }
  }
})

使用：

<input v-focus></input>

例如，写一个自动聚焦的输入框：

Vue.directive('focus', {
   // 当被绑定的元素插入到DOM时执行
  inserted: function (el) {
    el.focus();
  }
})

此时，在input元素上使用 v-focus 指令就可以实现自动聚焦了。

下一节咱们讲讲自定义指令，下节再见~

最后

如果对您有帮助，希望能给个?评论/收藏/三连！

博主为人老实，无偿解答问题哦❤