Vue Mixins(混入)使用

总结

mixins文件中定义的methods方法，可以在每个文件中引入使用，data中定义的数据，在各个文件中都是独立的，默认都是初始值，不会因为在其中一个文件中修改而修改，即方法和参数在各组件中不共享。

定义

// myMixins.js文件
export const myMixins = {
    components:{},
    data() {
        return {
            priceMixins: 66,
        }
    },
    mounted() { },
    methods: {
        // 价格加减
        priceAddRemoveMixinsEvent(type){
            if(type === 'add'){
                this.priceMixins++;
            }
            if(type === 'remove'){
                this.priceMixins--;
            }
        }
    }
}

使用tab1

// tab1.vue文件
<template>
  <div>
    tab1-Page
    <hr>
    <!-- 取的mixins中的变量 -->
    price:{{ priceMixins }}
    <hr>
    <button @click="handEvent('add')">+</button>
    <button @click="handEvent('remove')">-</button>
  </div>
</template>

<script>
import { myMixins } from "@/utils/myMixins";
export default {
  //      数组中可以引入多个mixins文件，不同文件中事件、data变量不能重复
  mixins: [myMixins,],
  methods: {
      handEvent(type){
          // 触发mixins组件的方法
          this.priceAddRemoveMixinsEvent && this.priceAddRemoveMixinsEvent(type);
      }
  },
}
</script>

使用tab2

// tab2.vue文件
<template>
  <div>
    tab2-Page
    <hr>
    <!-- 取的mixins中的变量 -->
    price:{{ priceMixins }}
    <hr>
    <button @click="handEvent('add')">+</button>
    <button @click="handEvent('remove')">-</button>
  </div>
</template>

<script>
import { myMixins } from "@/utils/myMixins";
export default {
  //      数组中可以引入多个mixins文件，不同文件中事件、data变量不能重复
  mixins: [myMixins,],
  methods: {
      handEvent(type){
          // 触发mixins组件的方法
          this.priceAddRemoveMixinsEvent && this.priceAddRemoveMixinsEvent(type);
      }
  },
}
</script>

使用App.vue

// App.vue文件
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> | 
      <router-link to="/tab1">tab1-mixins</router-link> | 
      <router-link to="/tab2">tab2-mixins</router-link>
    </nav>
    <hr>
    price-App:{{ priceMixins }}
    <hr>
    <router-view/>
  </div>
</template>

<script>
import { myMixins } from "@/utils/myMixins";
export default {
  mixins: [myMixins,],
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>