将来我们可能要定义非常多的组件，那么不可避免的是有些组件的数据、函数methods方法、监听，计算属性等都可能会重复。 那么如何提高这些（组件配置项）的复用，可以通过组件的复用mixin混入来实现vue组件配置项的复用，一个混入对象可以包含任意的组件选项 当组件中使用混入对象时，会把混入对象的配置混入进入配置项本身
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 混入选项的合并
如果组件的配置项和混入对象的配置项出现重名的时候（方法或数据）
在这种情况下，一般是以组件配置项为主，但也有特殊情况，比如生命周期函数 -->
<sub-component></sub-component>
</div>
<template id="subComponent">
<div>
<h2>subComponent</h2>
<p>组件内部定义的数据{{name}}</p>
<p><button @click="add"> 调用组件内部的函数</button></p>
<hr>
<p>混入对象配置的数据{{address}}</p>
<p><button @click="edit"> 调用混入对象的的方法</button></p>
<hr>
<p>name的值{{name}}</p>
<p>age的值{{age}}</p>
<p>address的值{{address}}</p>
<p><button @click="add">add</button></p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
/*
混入mixin
作用：将多个组件中公共的内容提取出来，形成一个对象，然后再组件内部配置混入对象，就可以实现复用
*/
//定义混入对象：就是普通对象(只有配置到组件中的时候，才是混入对象)，可以定义任意的组件选项
let myMixin = {
data () {
return {
name:'Jack',
age:12,
gender:'男',
address:'河南省，郑州市'
}
},
methods: {
add(){
console.log('混入对象的add');
},
remove(){
console.log('myMixin remove...');
},
edit(){
console.log('myMixin edit');
}
},
mounted(){
console.log('myMixin的mounted');
},
computed: {
cdata(){
return 'hello vue';
}
}
};
Vue.component('subComponent', {
template:'#subComponent',
data () {
return {
name:'tom',
gender:'女',
address:'浙江省温州市'
}
},
methods: {
add(){
console.log('组件自身定义的方法add');
}
},
mounted(){
console.log('自身的mounted');
},
computed: {
cdata(){
return 'hello 组件自身';
}
},
//混入配置
mixins: [myMixin],
});
let vm = new Vue({
el : "#app",
data : {
}
})
</script>
</body>
</html>
标签：混入,Vue,console,log,对象,add,组件 From： https://www.cnblogs.com/yansunda/p/18374140