vue2 mixins

作者：刃起风啸凌发布日期:2026-04-27 浏览:41

// Vue 2 Mixins 示例

// 定义一个混入对象
const myMixin = {
  created() {
    console.log('混入的 created 钩子');
  },
  methods: {
    greet() {
      console.log('你好，来自混入的方法！');
    }
  }
};

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

// 解释说明：
// 在这个示例中，我们定义了一个名为 `myMixin` 的混入对象，它包含了一个 `created` 生命周期钩子和一个 `greet` 方法。
// 然后我们在创建 Vue 实例时，通过 `mixins` 选项将 `myMixin` 引入到实例中。
// 当 Vue 实例被创建时，混入对象的 `created` 钩子会先执行，然后是组件本身的 `created` 钩子。
// 此外，组件可以调用混入中定义的方法。

上一篇：vue.filter

下一篇：vue jsonp