vue-mixin

news2024/12/23 14:44:38

1.vue中，混入(mixin)是一种特殊的使用方式。一个混入对象可以包含任意的组件配置选项(data, props, components, watch,computed…)可以根据需求"封装"一些可复用的单元，并在使用时根据一定的策略合并到组件的选项中，使用时和组件自身的选项没有区别.

2.mixin中比较重要的两个方法: Vue.extend() 和 extend()

3.Vue.extend(): 是基础的Vue构造器，参数是一个包含组件选项的对象(组件选项包括data, props, computed, methods等等), 可以显示的扩展组件和混入对象

4.全局混入将对所有的Vue实例均有效，不推荐使用，但是在编写一些Vue插件的时候会用到，例如Vuex的源码中就使用了全局的mixin全局混入$store对象

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <child></child>
    </div>
</body>
<script>
   // 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var child = Vue.extend({
  template:'<div></div>',
  mixins: [myMixin]
})

let app = new Vue({
    el:"#root",
    components:{
        child
    }
})
</script>
</html>

在这里插入图片描述
4.extend(): 是对象的合并方法，参数是合并的源对象和目标对象，用于对象的合并，用法为: extend(target, source)表示source对象将合并到target对象上，作用类似Object.assign()方法
（当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。）

案例

<script>
   // 定义一个混入对象
   var myMixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

// 定义一个使用混入对象的组件
new Vue({
  el:'#root',
  mixins: [myMixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})
</script>