Vue - mixin 和 插件

---

一、mixin

两个组件共享一个配置.

比如这里的两个组件有同一个方法, 那么就可以把这个方法提取出来

mixin.js

export const mixin = {
  methods: {
    showName() {
      console.log(this.name);
    }
  },
}

然后在需要使用的组件内引入

<script>
  // 引入一个mixin
  import {mixin} from "../mixin"

  export default {
    name:"Nav",
    data() {
      return {
        name: "nav"
      }
    },
    mixins: [mixin]
  }
</script>

二、插件

1. 创建插件

一般插件被放在**src目录下, 名字叫做plugins.js**
插件本质上就是一个对象, 对象里面必须有一个install方法

plugins.js

export default {
  install() {
    console.log("我是插件的install方法");
  }
}

2. 引入插件

使用Vue.use(插件名) 引入插件

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入插件
import plugins from './plugins'

Vue.config.productionTip = false

//使用插件
Vue.use(plugins)

new Vue({
  render: h => h(App),
}).$mount('#app')

3. install方法介绍

install 方法接收一个参数, 这个参数就是vue构造函数

main.js

export default {
  install(a) {
    console.log(a);
  }
}