Vue混入（二）继承后方法重写

前言

iOS开发中，子类继承父类的属性与方法时，会对父类的属性与方法进行重写；而在Vue混入的时候，可能有点区别

一、数据的重写

如果组件内与混入对象有相同的数据时，组件内的数据会覆盖混入对象内的数据；

• 混入对象

export default {
  data() {
    return {
        username: "张三"
    }
  },
};

• 组件

<template>
  <div class="home">
    <div>
      {{ username }}
    </div>
  </div>
</template>

<script>
import CommonMins from '@/views/CommonMins' 
export default {
  name: 'Home',
  mixins: [CommonMins],
  data() {
    return {
      username: "王五"
    }
  },
}
</script>

• 展示结果

  
  截图

展示结果是王五而不是张三，说明组件内的username覆盖了混入对象内的username

二、普通方法的重写

如果组件与混入对象有相同的方法时，组件内的方法会覆盖混入对象的方法；

• 混入对象

export default {
  data() {
    return {
        username: "张三"
    }
  },
  methods: {
    loadData() {
      this.username = "李四";
    },
  },
};

• 组件

<template>
  <div class="home">
    <div>
      {{ username }}
    </div>
  </div>
</template>

<script>
import CommonMins from '@/views/CommonMins' 
export default {
  name: 'Home',
  mixins: [CommonMins],
  mounted() {
    this.loadData()
  },
  methods: {
    // 组件内的方法会覆盖混入对象的方法
    loadData() {
      this.username = "赵六"
    }
  }
}
</script>

• 结果

  
  截图

三、钩子函数的重写
在混入对象也可提前定义钩子函数；
当组件与混入对象定义了相同的钩子函数时，在运行时，不会覆盖混入对象的钩子函数，而是会先执行混入对象的钩子函数，然后执行组件内的钩子函数；

• 混入对象

export default {
  data() {
    return {
        username: "张三",
        age: "12"
    }
  },
  mounted() {
      this.username = "李四"
      this.age = 13
  },
};

• 组件

<template>
  <div class="home">
    <div>
      {{ username }}
    </div>
    <div>
      {{ age }}
    </div>
  </div>
</template>

<script>
import CommonMins from '@/views/CommonMins' 
export default {
  name: 'Home',
  mixins: [CommonMins],
  mounted() {
    this.age = 16
  }
}
</script>

• 运行效果

  
  截图

上述工程中，会先运行混入对象的mounted，然后运行组件内的mounted