vue实现组件功能复用 mixins

首先我们创建一个vue项目 然后 在src下创建一个 utils文件夹 下面一个index.js
index.js 参考代码如下

export default {
    data () {
        return {
            tintname: '我是外部引入的名称'
        }
    },
    methods: {
        getTintname(){
            console.log(this.tintname);
        },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

很显然 我们这个js中导出了一个对象 而这个对象结构是不是很像一个vue组件

这一块我们就是要拿来给组件用的
因为这个项目我只是想做过案例 代码我就直接写在 App.vue里啦

App.vue参考代码如下

<template>
  <div class="containers">
    <div>{{ name }}div>
    <div>{{ tintname }}div>
  div>
template>

<script>
import publicDate from '@/utils/index' // 引入 bpmn-js
export default {
  mixins:[publicDate],
  data () {
    return {
      name: '我是组件本身的名称'
    }
  },
  methods: {
    getName(){
      console.log(this.name);
    }
  },
  mounted () {
    this.getName();
    this.getTintname();
  }
}
script>

<style lang="scss">
style>
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

这里可以看到 我们App.vue中 引入了 utils 下的 index.js 以 publicDate作为代理名
然后将publicDate放在mixins中
大家可以看出 mixins是个数组 说明 是可以引入多个魔板的 mixins:[魔板1,魔板2,魔板3]

然后 我们用了 自己定义的属性name 和调用了自己定义的getName 除此之外 还调用了 从utils 下的 index.js中拿来的 tintname属性和 getTintname方法

效果如下

也是非常的成功 以后就可以用这种方式实现代码复用啦