vue中mixin用法和注意事项

组件

注意事项:

1. 不要mixin中方法与组件方法重名 , 如果重名则执行组件中的方法 , mixin方法不执行

2. 先执行 mixin 的mounted 再执行组件的 mounted

<template>
  <div>
    姓名: {{ title }} 年纪 :{{ sex }}
<hr />
    所在城市:{{ city }}
    <button @click="showName">调用 mixin 的方法</button>
  </div>
</template>
<script>
import myMixin from './myMixin'
export default {
  mixins: [myMixin],  //可以添加多个 , 会自动合并起来
  data () {
    return {
      title: 'zs',
      sex: 18
    }
  },
  methods: {
    showName () {
      console.log('我的title，在父组件中 , 当父组件和minxin组件重名时 执行父组件中的方法' ,this.title)
    }
  },
  // 先执行 mixin 的mounted 再执行组件的 mounted
  mounted () {
    console.log('compents mounted', this.city)
  }
}
</script>

mixin文件

//myMixin.js -----------------------
export default {
  data () {
    return {
      city: '武汉市'
    }
  },
  methods: {
    showName () {
      console.log('我的title，在Mixin组件中' ,this.title)
    }
  },
  mounted () {
    console.log('mixin mounted', this.sex)
  }
}