vue 高级特性mixins

vue 高级特性mixins

1)抽离多个组件相同的逻辑

存在的问题：变量来源不明确不利于阅读，多个mixin可能会造成命名冲突，多对多的关系（一个组件引用多个mixin或者多个组件引用一个mixin），复杂度会较高

<template>
  <!-- rights组件 -->
  <div class="header">
    <p>mixin 抽取公共组件逻辑，缺点是不易阅读，命名冲突等</p>
    <hr>
    <div>{{name}}  {{city}}</div>
    <button @click="showName">显示名字</button>
  </div>
</template>

<script type="text/ecmascript-6">
// 引入mixin.js
import myMixin from './mixin'
export default {
  // 使用注意写法，也可多个引用
  mixins: [myMixin],
  data() {
    return {
      name: 'liu man'
    }
  },
}
</script>

// mixin.js
export default{
  data() {
    return {
      city: '重庆123'
    }
  },
  methods: {
    showName() {
      console.log(this.name);
    }
  },
}