Vue Mixin混入机制

在 Vue.js 中，Mixin（混入）是一种可复用代码的机制，用于在多个组件之间共享逻辑。通过混入，可以将通用功能提取到一个独立的文件中，然后在组件中引入并使用，而无需重复代码。

---

基本概念

Mixin 是一个对象，可以包含组件中的任何选项，比如数据、生命周期钩子、方法等。当一个组件使用混入时，Mixin 的内容会被“混入”到该组件中。

---

定义和使用

1. 定义一个 Mixin

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

2. 在组件中使用 Mixin

<template>
  <div>
    <p>{
   
   {
   
    sharedData }