Vue.js功法之练气初期：复习知识点之Vue 混入（Mixins）

Vue 混入（Mixins）

Vue 混入是一种将可复用功能组合到组件中的方式，使得你可以在多个组件中共享相同的逻辑。混入提供了一种将代码组织成可重用功能模块的方式，以避免代码重复。

为什么使用混入？

1. 代码重用： 将常用的逻辑提取到混入中，使得多个组件可以共享相同的代码。
2. 灵活性： 可以根据需要在组件中选择性地使用混入，提高灵活性。

示例代码

假设我们有多个组件需要进行日志记录，我们可以创建一个混入来实现日志功能。

1. 创建混入 - logMixin.js

export default {
  methods: {
    logMessage(message) {
      console.log(`[Log]: ${message}`);
    },
  },
};

2. 在组件中使用混入

<template>
  <div>
    <h2>使用混入的组件</h2>
    <button @click="logButtonClick">记录日志</button>
  </div>
</template>

<script>
import logMixin from './path/to/logMixin';

export default {
  mixins: [logMixin],
  methods: {
    logButtonClick() {
      this.logMessage('按钮被点击了！');
    },
  },
};
</script>