关于mixins有两种 局部混入和全局混入
首先要明确 mixins能混入数据，方法，钩子函数等
mixin的数据对象和组件的数据发生冲突时以组件数据优先。
1.局部混入
<template>
<div class=”myMixins”>
<div>关于mixins的使用</div>
<button @click=”go()”>点击打印</button>
</div>
</template>
<script>
const mixin={
data(){
return{
sex:’boy’,
name:’小红’
}
}
}
export default{
name:’myMixins’,
mixins:[mixin],
data(){
return{
name:’小明’,
age:’30’
}
},
methods:{
go: function () {
console.log(this.sex)
// title为在main.js中定义的全局混入
console.log(this.title)
}
}
}
</script>
<style>
</style>
2.全局混入 需要在main.js全局定义 即可使用this. 来调用数据或者方法
Vue.mixin({
data(){
return {
title:’haha’
}
}
})