Vue高级特性之mixin具体案例讲解

mixin作用就是多个组件有相同的逻辑，抽离出来

下面还是通过一个案例来具体演示

创建一个mixin.js文件

export default {
  data() {
    return {
      city: '北京'
    }
  },
  methods: {
    showName(){
      console.log(this.name)
    }
  },
  mounted() {
    console.log('mixin mounted',this.name)
  },
}

再把这个文件导入

<template>
  <div>
    <p>{{name}} {{major}} {{city}}</p>
    <button @click="showName">显示姓名</button>
  </div>
</template>

<script>
import myMixin from './mixin'
export default {

mixins:[myMixin],
data() {
  return {
    name:'双越',
    major:'web 前端'
  }
},
methods: {
  
},
mounted() {
  console.log('component mounted',this.name)
},
}
</script>

mixins里面可以添加多个，会自动合并起来

也有很多缺点

变量来源不明确，不利于阅读
多mixin可能会造成命名冲突
mixin和组件可能出现多对多的关系，复杂度较高