vue中的mixin(局部混入、全局混入)

作者：System 时间：2024年08月13日分类：所有,vue.js 字数：687

Vue中的mixin是一种灵活的方式，可以在多个组件之间共享数据和方法。它通过定义可复用的功能，然后在组件中引入，可以减少重复代码并提高开发效率。

局部混入：在组件中直接使用mixins属性引入。




// 定义一个mixin对象
var myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}
 
// 在组件中使用
export default {
  mixins: [myMixin],
  created() {
    console.log('hello from component!')
  }
}

全局混入：通过Vue.mixin()全局引入，这将影响到所有之后创建的Vue实例。




Vue.mixin({
  created() {
    console.log('hello from mixin!')
  }
})
 
new Vue({
  created() {
    console.log('hello from Vue instance!')
  }
})

在这个例子中，两个created钩子函数都将被调用，先是全局混入的，然后是实例的。

注意：请谨慎使用全局混入，因为它会影响所有Vue实例的行为。

vue中的mixin(局部混入、全局混入)

评论已关闭

推荐阅读