vue混入(mixin)的详解

混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。1.钩子函数同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。var mixin = {created: function () {console.log('混入对象的钩子被调

小铁匠95

14442人浏览 · 2021-11-12 14:49:02

小铁匠95 · 2021-11-12 14:49:02 发布

混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

1.钩子函数

混入对象的钩子将在组件自身钩子之前调用。

 //  minxin.js
const mixin = {
  data() {
    return{
      msg1: '我是混入内容1',
      msg2: '我是混入内容2'
    }
  },
  created() {
    console.log(this.msg3)
  }
}
export default mixin;
</script>
...
// 页面组件
<template>
  <div class="header">
    <h1></h1>
  </div>
</template>
<script>
import mixin from './mixins/mixin'
export default {
  mixins: [mixin],
  name: 'Header',
  data(){
    return{
      msg1: '我是组件内容1',
      msg3: '我是组件内容2'
    }
  },
  created() {
      console.log(this.msg2)
      console.log(this.msg1)
  },
}
</script>
  
	// 我是组件内容2
	// 我是混入内容2
	// 我是组件内容1

3.普通方法合并

当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。

<body>
    <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
    var Mixins = {
        methods: {
            mixin: function() {
                console.log('MixinOne')
            },
            mixinTwo: function () {
                console.log('MixinTwo')
            }
        }
    }
    new Vue({
        el: '#app',
        mixins: [Mixins],
        methods: {
            mixin: function () {
                console.log('component')
            }
        },
        mounted() {
            this.mixin()
            this.mixinTwo()
        }
    })
    
	// component
	// MixinTwo
</script>

4.局部混入

在componnets目录下新建mixins文件夹，并在mixins目录下创建一个mixin.js文件，代码如下：

const mixin = {
  data() {
    return {
      msg: "hello"
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + ',这是mixin混入方法')
    }
  }
}
export default mixin;

在需要的页面中引入：

<template>
	<div>{{msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
	mixins: [mixin],
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// hello，这是mixin混入的方法

5.全局混入

在main.js加入以下代码

Vue.mixin({
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
})

在组件中直接引用：

<template>
	<div>{{msg}}</div>
</template>
<script>
export default {
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// hello，这是mixin混入的方法
</script>