博主首页

vue2的mixins

代码复用,可以使用引入的组件内的数据以及方法

使用 Mixins 的步骤
定义 Mixin:
创建一个包含共享选项的对象。例如,定义一个 myMixin.js 文件:

// myMixin.js
export default {
  data() {
    return {
      mixinData: 'This is mixin data'
    };
  },
  methods: {
    mixinMethod() {
      console.log('This is a method from the mixin');
    }
  },
  created() {
    console.log('Mixin created hook');
  }
};

在组件中引入 Mixin:
在你的 Vue 组件中,使用 mixins 选项引入这个 mixin:

<template>
  <div>
    <h1>{{ mixinData }}</h1>
    <button @click="mixinMethod">Call Mixin Method</button>
  </div>
</template>

<script>
import myMixin from './myMixin';

export default {
  mixins: [myMixin],
  data() {
    return {
      componentData: 'This is component data'
    };
  },
  created() {
    console.log('Component created hook');
  }
};
</script>

 

posted @ 2025-01-15 16:06  笑~笑  阅读(50)  评论(0)    收藏  举报