【无标题】vue mixin的基本使用

mixin主要作用是当多个组件之间存在很多公共的东西，比如data，methods等等，把它抽离出来，然后放到mixin里，再分别引入使用的技巧。直接上代码

//mixin.js
export default {
    data(){
        return {
            commonData: "公有data",
        }
    },
    mounted(){
        this.commonMethod();
    },
    methods:{
        commonMethod(){
            console.log('公共方法');
            
        }
    }
}

//父组件
<template>
  <div>
      父组件
    <div>
        <CompA/>
    </div>
    <div>
        <comp-b/>
    </div>
  </div>
</template>
<script>
import CompA from '@/views/mixinTest/components/compA.vue'
// import CompA from './components/compA.vue'
import CompB from './components/compB.vue'
export default {
    components:{
        CompA,
        CompB
    },

//组件a
<template>
  <div>组件a
      {{privateA}}
      <div>
          {{commonData}}
      </div>
  </div>
</template>
<script>
import mixin from '../mixin/mixin'
export default {
    mixins:[mixin],
  data() {
    return {
      privateA: "私有的data",
    //   commonData: "公有data",
    };
  },
  mounted() {
      this.privateMethod()
    // this.commonMethod();
  },
  methods: {
    privateMethod() {
      console.log("私有的方法");
    },
    // commonMethod() {
    //   console.log("公有的方法");
    // },
  },
};
</script>

<template>
  <div>组件b
      {{privateB}}
      <div>
          {{commonData}}
      </div>
  </div>
</template>

<script>
import mixin from '../mixin/mixin'
export default {
    mixins:[mixin],
  data() {
    return {
      privateB: "私有的data",
    //   commonData: "公有data",
    };
  },
  mounted() {
      this.privateMethod()
    // this.commonMethod();
  },
  methods: {
     privateMethod() {
      console.log("私有的方法");
    },
    // commonMethod() {
    //   console.log("公有的方法");
    // },
  },
};
</script>

亲测，可以在其他任何页面引入该mixin，并且有效。比如我在home.vue引入，照样有效。