vue实现组件功能复用 mixins

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

export default {
    
    
    data () {
    
    
        return {
    
    
            tintname: '我是外部引入的名称'
        }
    },
    methods: {
    
    
        getTintname(){
    
    
            console.log(this.tintname);
        },
    }
}

很显然我们这个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>

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

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

效果如下
在这里插入图片描述
也是非常的成功以后就可以用这种方式实现代码复用啦

vue实现组件功能复用 mixins

猜你喜欢