vue-mixin

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>Documenttitle>
    <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:'
',
  mixins: [myMixin]
})

let app = new Vue({
    el:"#root",
    components:{
        child
    }
})
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在这里插入图片描述
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

（同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。）

相关阅读:
python数据可视化
python数据分析——数据可视化（图形绘制）
百度移动权重查询易语言代码
抗疫逆行者网页作业感动人物HTML网页代码成品网页作业带JS下拉菜单最美逆行者网页模板致敬疫情感动人物网页设计制作
科研丨Web of Science检索技巧
Android 开发常见问题
设计模式 17 迭代器模式
Hadoop系列——大数据概念day1-1
深度学习输入数据的归一化
腾讯云服务器后台重装后需要配置的一些东西

原文地址：https://blog.csdn.net/weixiwo/article/details/133754060