Vue @mixin 继承的影子

在Vue中，@mixin是一种可重用的代码块，可以在多个组件中使用。使用@mixin可以将一些常用的样式或功能封装起来，以便在需要时轻松地重用它们。

要使用@mixin，需要在Vue组件中定义一个mixin对象，然后在需要使用它的组件中使用mixins属性将其添加到组件中。

例如，以下是一个简单的@mixin示例：

// 定义一个mixin对象
const myMixin = {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    greet() {
      console.log(this.message)
    }
  }
}

// 在组件中使用mixin
export default {
  mixins: [myMixin],
  mounted() {
    this.greet() // 输出 "Hello, world!"
  }
}

在上面的示例中，我们定义了一个名为myMixin的mixin对象，它包含一个名为message的数据属性和一个名为greet的方法。然后，我们在组件中使用mixins属性将myMixin添加到组件中。在组件的mounted钩子函数中，我们调用greet方法，它将输出“Hello, world!”到控制台。

需要注意的是，如果mixin对象和组件中有相同的属性或方法，组件中的属性或方法将覆盖mixin中的属性或方法，可以理解为面向对象中的继承。因此，在使用@mixin时，应该注意属性或方法名是否被覆盖，也可以利用特性书写继承与多态。