vue mixins

作者：遥岚月刹发布日期:2025-10-13 浏览:10

// Vue Mixins 示例代码

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

// 创建一个使用混入的 Vue 组件
new Vue({
  mixins: [myMixin],
  created() {
    console.log('组件自己的 created 钩子');
    // 调用混入中的方法
    this.greet();
  }
});

// 解释说明：
// 1. `myMixin` 是一个混入对象，包含了一个 `created` 生命周期钩子和一个 `greet` 方法。
// 2. 在创建 Vue 实例时，通过 `mixins` 选项将 `myMixin` 混入到组件中。
// 3. 当组件实例化时，混入对象的 `created` 钩子会在组件自身的 `created` 钩子之前执行。
// 4. 组件可以通过 `this` 访问混入对象的方法，例如 `this.greet()`。

上一篇：vue父组件调用子组件方法

下一篇：vue component