Vue 中使用 mixin

a.vue

<template>
  <div>
    <button @click="xxxx('这是提交1')">提交1</button> 
  </div>
</template>
<script>
export default {
  methods: {
    xxxx(row){
      console.log(row);//这是提交1
    }
  },
}
</script>

b.vue

<template>
  <div>
    <button @click="xxxx('这是提交2')">提交2</button> 
  </div>
</template>
<script>
export default {
  methods: {
    xxxx(row){
      console.log(row); //这是提交2
    }
  },
}
</script>

可以看出 a.vue 与b.vue 中有一个共同的方法

  xxxx(row){
      console.log(row);
   }

使用mixin

新建mixin.js

export default{
  methods: {
    xxxx(row){
      console.log(row);
    }
  },
}

分别在a.vue与b.vue中引入 如下：
a.vue

<template>
  <div>
      <button @click="xxxx('这是提交1')">提交1</button> 
  </div>
</template>
<script>
import mixins from './mixin'
export default {
  mixins:[mixins], //注意不要这样写 ['mixins']
}
</script>

b.vue

<template>
  <div>
      <button @click="xxxx('这是提交2')">提交2</button> 
  </div>
</template>
<script>
import mixins from './mixin'
export default {
  mixins:[mixins], //注意不要这样写 ['mixins']
}
</script>

效果如下：

效果