Vue复用之Mixins混入

2022-11-28 108

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 4.1 Mixins 混入1. 什么是Mixins当多个组件内部都写了同样的方法，如何将该方法提取出来，减少代码量呢？Vue实现方式如下：

Vue复用之Mixins混入

4.1 Mixins 混入

1. 什么是Mixins

当多个组件内部都写了同样的方法，如何将该方法提取出来，减少代码量呢？

Vue实现方式如下：

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"

2. mixins里定义的和组件内部定义的重复冲突了怎么办

2.1 数据对象是采取合并策略，

组件内部的覆盖mixins里定义的，如下：

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

2.2 钩子函数采取的是将他们merge进数组

都触发，先触发mixins中的函数，如下

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}
new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})
// => "mixin hook called"
// => "component hook called"