被混入的組件
<template>
??<div?class="vuemix">
????<!--?組件中沒有name,但是混入的對象中有，即可使用?-->
????<p>{{name}}</p>
????<!--?組件中有age屬性,混入對象中也有age屬性,當(dāng)混入對象和組件中有共同的屬性時,讀取組件中的值?-->
????<p>{{age}}</p>
??</div>
</template>
<script>
//=====================================================================================================
//===:vue的混入
//===:混入規(guī)則:1.混入的data中??鍵名相同,則讀取組件中的鍵名，反之讀取混入的鍵名
//===:混入規(guī)則:2.同名鉤子函數(shù)混合為一個數(shù)組,因此都將會被調(diào)用,混入對象的鉤子將在自身的鉤子之前調(diào)用
//===:混入規(guī)則: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方法,但是混入對象中有這個方法,所可以調(diào)用到fnConsoleLog1方法
????//========================================================================================輸出:1????
????this.fnConsoleLog2()
??}
}
</script>
<style>
</style>
混入對象
//================================================================================
//===:定義一個混入的對象
var?vueMix?=?{
??data(){
????return{
??????name:'趙光硯',
??????age:16
????}
??},
??created(){
????console.log('我是混入對象的created');
????//===:由于混入對象的created和組件的created都進(jìn)行了輸出,當(dāng)程序運行時,會輸出
????//===:1.我是混入對象的created
????//===:2.我是組件的created
????//===總結(jié):同名鉤子函數(shù)混合為一個數(shù)組,因此都將會被調(diào)用,混入對象的鉤子將在組件的鉤子之前調(diào)用
??},
??mounted()?{
????//===:這里調(diào)用了fn方法,但是fn輸出的是
????//================================:我是組件里面的方法
????//===:總結(jié):值為對象的混入，如metholds,components等，選項會被合并,組件對象覆蓋混入的對象
????this.fn()
????//===:混入對象中沒有fnConsoleLog1方法,但是被混入的組件中有這個方法,所可以調(diào)用到fnConsoleLog1方法
????//========================================================================================輸出:1
????this.fnConsoleLog1()
??},
??methods:?{?
????fn(){
??????console.log("我是混入對象的方法")
????},
????fnConsoleLog2(){
??????console.log(2)
????}
??},
}
export?default?vueMix
