Vue.js入门-Mixin和插件的使用自用笔记，自用笔记，自用笔记，自用笔记，自用笔记，自用笔记，自用笔记，自用笔记，

Mixin（混入）

假如我在每个cmp都需要一个固定的变量：Author，这时可以将这个变量抽出来，类似于转成一个公共变量，在Vue里，使用Mixin可以将Vue里的配置项提出来。

1.方式一：局部引入

（1）创建mixin.js与main.js同级

export const mixin = {  
  data() {  
    return {  
      Author: 'Zaki'  
    }  
  }
  // 还可以配置其他的属性，如methods...
}

（2）使用混入，在需要此配置的cmp导入此文件，然后配置混入

// 这个导入需要假如{}，{}里的变量代表minxi.js暴露的变量名称
import {mixin} from "@/mixin"

export default {
    name: 'xxx',
    mixins: [mixin],  // 这是个数组，意味着可以导入多个混入
}

方式二：全局引入

（1）修改main.js

import {mixin} from "./mixin"  

// 使用混入。如果存在多个混入的情况，继续使用Vue.mixin(xxx)引入
Vue.mixin(mixin)
// Vue.mixin(xxx)

方式三：在插件中引入（参考以下插件的使用方法）

注：无论是哪种方式使用混入，如果混入的配置与cmp冲突了，cmp自身的配置会覆盖混入的配置。例如我在xxx组件中也定义了变量Author='Sergio'，那么在xxx这个组件中，Author的有效值为'Sergio'。

插件 Vue.use

GPT的解释：在Vue.js中，`Vue.use`是一个用于安装Vue插件的全局方法。它的主要用途是注册全局组件、添加全局指令、混入(mixin)等。

（1）GPT生成的示例：

// 自定义插件
const MyPlugin = {
  install(Vue, options) {
    // 注册全局组件
    Vue.component('my-component', { /* ... */ });

    // 添加全局指令
    Vue.directive('my-directive', { /* ... */ });

    // 添加全局混入
    Vue.mixin({ /* ... */ });

    // 添加全局方法
    Vue.myGlobalMethod = function() { /* ... */ };

    // 添加实例方法
    Vue.prototype.$myMethod = function() { /* ... */ };
  }
};

// 安装插件
Vue.use(MyPlugin);

（2）我的示例：创建plugins.js与main.js同级，然后在main.js使用插件

export default {  
 install(Vue) {  
   // 自定义过滤器  
   Vue.filter('myFilter', function(value) {  
     return '@Zaki ' + value  
   })  

   // 给vue原型添加一个方法  
   Vue.prototype.helloVue = () => {  
     console.log('hello vue by plugins')  
   }  

   // 使用混入
   Vue.mixin({
     data() {
        Author: 'Zaki' 
     }
   })
 }  
}

import plugins from "./plugins";

Vue.use(plugins)

Vue.js入门-Mixin和插件的使用