vue混入mixin流程与优缺点详解

<script>
//1、引入
import MyMixin from "../../mixin/index"
export default {
  //使用
  mixins: [MyMixin],
}
</script>

import Mixin from "./mixin";
Vue.mixin(Mixin)

<template>
  <div class="Button">
    <button :class="['my-btn', btnStyle]">
      <slot></slot>
    </button>
  </div>
</template>
<script>
export default {
  name: "Button",
  props: {
    btnStyle: {
      type: String,
      default: 'btn-primary'
    },
  },
}
</script>
<style scoped>
.my-btn {
  height: 34px;
  padding: 0 15px;
  border: none;
  background-color: #874b4b;
  color: #fff;
}
.my-btn.btn-primary {
  background-color: blue;
  /*color: #fff;*/
}
.my-btn.btn-danger {
  background-color: red;
  /*color: #fff;*/
}
</style>

import MyBtn from "./MyUI/Button";
export default {
    components:{
        MyBtn
    }
}

<template>
  <div class="MixinStudy">
    <!--    通过Mixin写的一个UI组件button-->
    <MyBtn btnStyle="btn-danger">点击</MyBtn>
  </div>
</template>
<script>
import MyMixin from "../../mixin/index"
export default {
  name: "MixinStudy",
  mixins: [MyMixin],
}
</script>

main.js文件中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Mixin from "./mixin";
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false;
Vue.mixin(Mixin)
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')
//组件中
<template>
  <div class="MixinStudy">
    <!--    通过Mixin写的一个UI组件button-->
    <MyBtn btnStyle="btn-danger">点击</MyBtn>
  </div>
</template>
<script>
export default {
  name: "MixinStudy",
}
</script>