初时mixin

最新推荐文章于 2022-07-20 20:35:10 发布

原创最新推荐文章于 2022-07-20 20:35:10 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了Vue.js中Mixins的使用方法及其优势，通过一个简单的示例展示了如何定义和应用Mixins，使得代码更加优雅并方便后期维护。

mixin（混入）：当有相同的数据或者相同的操作方法时，可以使用mixin。

方便以后进行维护
使得代码更加优雅
多个组件可以共享数据和方法
当函数名相同时，mixin函数会先执行

// 官方例子
//定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"