vue的mixins使用

作者：以往沧海发布日期:2025-04-08 浏览:71

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

// 创建一个使用混入的Vue实例
new Vue({
  mixins: [myMixin],
  created() {
    console.log('组件自己的钩子函数');
  },
  methods: {
    greet() {
      console.log('你好，来自组件自己的方法');
    }
  }
});

// 解释说明：
// 1. `myMixin` 是一个混入对象，包含了 `created` 钩子函数和 `greet` 方法。
// 2. 在创建 Vue 实例时，通过 `mixins` 选项将 `myMixin` 混入到 Vue 实例中。
// 3. 当 Vue 实例创建时，混入对象中的 `created` 钩子函数会先执行，然后才是组件自己的 `created` 钩子函数。
// 4. 如果组件和混入对象都有同名的方法（如 `greet`），则组件自身的方法会覆盖混入对象中的方法。

上一篇：vue $listeners

下一篇：vue3跳转页面传递参数