基本用法

  • 通过Mixin技术，组件的复用性可以得到进一步的提高：
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
42
43
44
45
46
<body>
  <div id="Application">
    <my-com1 title="组件1"></my-com1>
    <my-com2 title="组件2"></my-com2>
    <my-com3 title="组件3"></my-com3>
  </div>

  <script>
    const App = Vue.createApp({});

    const com1 = {
      props: ['title'],
      template: `
        <div style="border:red solid 2px;">
          {{ title }}
        </div>
      `
    };

    const com2 = {
      props: ['title'],
      template: `
        <div style="border:blue solid 2px;">
          {{ title }}
        </div>
      `
    };

    const com3 = {
      props: ['title'],
      template: `
        <div style="border:green solid 2px;">
          {{ title }}
        </div>
      `
    };

    // 注册组件
    App.component("my-com1", com1);
    App.component("my-com2", com2);
    App.component("my-com3", com3);

    // 挂载应用
    App.mount("#Application");
  </script>
</body>
  • 我们可以定义一个混入对象(Mixin)，混入对象中可以包含任意的组件定义选项，当此对象被混入组件时，组件会将混入对象中提供的选项引入当前组件内部。
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
42
43
44
45
46
47
48
49
50
<body>
  <div id="Application">
    <my-com1 title="组件1"></my-com1>
    <my-com2 title="组件2"></my-com2>
    <my-com3 title="组件3"></my-com3>
  </div>

  <script>
    const App = Vue.createApp({});

    const myMixin = {
        props: ['title']
    }

    const com1 = {
      mixins: [myMixin],
      template: `
        <div style="border:red solid 2px;">
          {{ title }}
        </div>
      `
    };

    const com2 = {
      mixins: [myMixin],    
      template: `
        <div style="border:blue solid 2px;">
          {{ title }}
        </div>
      `
    };

    const com3 = {
      mixins: [myMixin],
      template: `
        <div style="border:green solid 2px;">
          {{ title }}
        </div>
      `
    };

    // 注册组件
    App.component("my-com1", com1);
    App.component("my-com2", com2);
    App.component("my-com3", com3);

    // 挂载应用
    App.mount("#Application");
  </script>
</body>

Mixin选项的合并

当混入对象与组件中定义了相同的选项时，Vue可以非常智能地对这些选项进行合并。

  • 不冲突的配置将完整合并：

    混入对象中定义了组件的属性数据，包含a、b和c共3个属性，组件本身定义了d属性，最终组件在使用时，其内部的属性会包含a、b、c和d。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const myMixin = {
  data() {
    return {
      a: "a",
      b: "b",
      c: "c"
    }
  }
}

const com = {
  mixins: [myMixin],
  data() {
    return {
      d: "d"
    }
  },
  // 组件被创建后会调用,用来测试混入的数据情况
  created() {
    // a,b,c,d都存在
    console.log(this.$data)
  }
}
  • 如果属性的定义有冲突，则以组件内部定义的为准，例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const myMixin = {
  props: ['title'],
  data() {
    return {
      a: 'a',
      b: 'b',
      c: 'c'
    }
  }
}

const com = {
  mixins: [myMixin],
  data() {
    return {
      c: 'C' // 覆盖 mixin 中的 c
    }
  },
  created() {
    // 组件创建后执行，验证数据合并结果
    console.log(this.$data); // 输出：{ a: 'a', b: 'b', c: 'C' }
  }
}

全局Mixin

  • 直接对应用实例进行Mixin设置即可：
1
2
3
4
5
6
const App = Vue.createApp({})
App.mixin({
	mounted(){
		console.log("Mixin对象mounted")
	}
})