被混入的组件
<template>
<div class="vuemix">
<!-- 组件中没有name,但是混入的对象中有，即可使用 -->
<p>{{name}}</p>
<!-- 组件中有age属性,混入对象中也有age属性,当混入对象和组件中有共同的属性时,读取组件中的值 -->
<p>{{age}}</p>
</div>
</template>
<script>
//=====================================================================================================
//===:vue的混入
//===:混入规则:1.混入的data中 键名相同,则读取组件中的键名，反之读取混入的键名
//===:混入规则:2.同名钩子函数混合为一个数组,因此都将会被调用,混入对象的钩子将在自身的钩子之前调用
//===:混入规则:3.值为对象的混入，如metholds,components等，选项会被合并,组件对象覆盖混入的对象
import vuemix from "./vuemix"
export default {
//===:在这里混入vue混入对象
mixins:[vuemix],
data(){
return{
age:30
}
},
created(){
console.log('我是组件的created');
},
methods:{
fn(){
console.log("我是组件里面的方法")
},
fnConsoleLog1(){
console.log(1)
}
},
mounted(){
this.fn()
//===:被混入的组件中没有fnConsoleLog2方法,但是混入对象中有这个方法,所可以调用到fnConsoleLog1方法
//========================================================================================输出:1
this.fnConsoleLog2()
}
}
</script>
<style>
</style>
混入对象
//================================================================================
//===:定义一个混入的对象
var vueMix = {
data(){
return{
name:'赵光砚',
age:16
}
},
created(){
console.log('我是混入对象的created');
//===:由于混入对象的created和组件的created都进行了输出,当程序运行时,会输出
//===:1.我是混入对象的created
//===:2.我是组件的created
//===总结:同名钩子函数混合为一个数组,因此都将会被调用,混入对象的钩子将在组件的钩子之前调用
},
mounted() {
//===:这里调用了fn方法,但是fn输出的是
//================================:我是组件里面的方法
//===:总结:值为对象的混入，如metholds,components等，选项会被合并,组件对象覆盖混入的对象
this.fn()
//===:混入对象中没有fnConsoleLog1方法,但是被混入的组件中有这个方法,所可以调用到fnConsoleLog1方法
//========================================================================================输出:1
this.fnConsoleLog1()
},
methods: {
fn(){
console.log("我是混入对象的方法")
},
fnConsoleLog2(){
console.log(2)
}
},
}
export default vueMix
