混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
定义一个 mixin.js文件
const mixin ={
data(){
return {
names: '李四',
foo : 'abc'
}
}
}
export default mixin;
创建一个vue文件
import mixin from '../../static/js/mixin'
export default {
mixins:[mixin],
data () {
return {
}
},
methods:{
},
created(){
alert(this.names) //李四
this.names = '张三'
alert(this.names) //张三
},
mounted(){
}
}
在此vue文件中可以获取到mixind定义的变量了。多个页面引用修改变量的值不会影响原始值。
全局混合
1.创建一个mixin.js文件
import mixin from '../static/js/mixin'
2.main.js 入口文件引入
import Vue from 'vue'
Vue.mixin({
data(){
return {
names: '李四',
foo : 'abc'
}
}
})
3.页面使用
// import mixin from '../../static/js/mixin'
export default {
name: 'Transtion',
// mixins:[mixin],
data () {
return {
}
},
methods:{
},
created(){
alert(this.names) //李四
this.names = '张三'
alert(this.names) //张三
},
}
具体使用参考vue官方文档https://cn.vuejs.org/v2/guide/mixins.html
