vue mixins使用

作者：傲世，小狂徒发布日期:2025-05-09 浏览:85

// Vue Mixins 示例代码

// 定义一个混入对象
const myMixin = {
  created() {
    console.log('混入的 created 钩子');
  },
  methods: {
    greet() {
      console.log('Hello from mixin!');
    }
  }
};

// 创建一个使用该混入的对象
const vm = new Vue({
  mixins: [myMixin],
  created() {
    console.log('组件自身的 created 钩子');
  },
  methods: {
    greet() {
      console.log('Hello from component!');
    }
  }
});

// 解释说明：
// 1. `myMixin` 是一个混入对象，它包含了一个 `created` 生命周期钩子和一个 `greet` 方法。
// 2. 在创建 Vue 实例时，通过 `mixins` 选项将 `myMixin` 引入到组件中。
// 3. 如果组件自身也有相同的生命周期钩子或方法，它们会合并。对于生命周期钩子，两者都会执行；对于方法，组件中的方法会覆盖混入中的方法。
// 4. 这个例子中，`created` 钩子会先执行混入中的逻辑，再执行组件自身的逻辑；而 `greet` 方法调用时，只会执行组件中的实现。

上一篇：vue this.$set

下一篇：vue markdown