vue中provide和inject的用法及说明(vue组件爷孙传值)

<template>
	<div id="app">
		我是父组件：{{message}}
		<second></second>
	</div>
</template>
<script>
import second from '../components/second.vue'
export default{
	data(){
		return{
			message:'我们一起当前端攻城狮！'
		}
	},
	provide(){ // provide是一个匿名函数，返回一个对象
		return {
			testmethods:this.testmethods,
			message:this.message
		}
	},
	methods:{
		testmethods(){
			console.log('调用了ProvideTest这个组件')
		}
	},
	components:{
		second
	}
}
</script>
<style lang="less" scoped>
</style>

<template>
	<div id="app">
		<p>second组件:{{message}}</p>
		<third></third>
	</div>
</template>
<script>
import third from './third.vue'
export default{
	data(){
		return{
		}
	},
	inject:['message','testmethods'],
	mounted() {
		this.testmethods()
	},
	components:{
		third
	}
}
</script>
<style lang="less" scoped>
</style>

<template>
	<div id="app">
		<p>third组件:{{message}}</p>
	</div>
</template>
<script>
export default{
	data(){
		return{
		}
	},
	//inject:['message','testmethods'], 简写
	inject:{ // 详细指定来源以及默认值
		message:{
			from:'message', //表示从组件ProvideTest传递过来的
			//default:'message' //默认值
		},
		testmethods:{
			form:'testmethods'
		}
	},
	mounted() {
		this.testmethods()
	},
}
</script>
<style lang="less" scoped>
</style>

//祖组件
<template>
    <div> this is grandparent component</div>
</template>
<script>
export {
    name:"grandparent",
    data(){
            return{
              hasMeal:false 
        }
    },
    provide(){
        return{
            hasMeal:this.hasMeal        
        }
    },
    create(){
      fetch(xxx).then(res=>{
            this.hasMeal=res.data.hasMeal  //此时是true
        })
    }
}
</script>
///
孙组件
<template>
    <div> this is grandson component</div>
</template>
<script>
export {
    name:"grandparent",
    data(){
            return{
        }
    },
    inject:['hasMeal'],
    create(){
        console.log(this.hasMeal)    //false
    }
}
</script>

//祖组件
<template>
    <div> this is grandparent component</div>
</template>
<script>
export {
    name:"grandparent",
    data(){
            return{
              hasMeal:false 
        }
    },
    provide:()=>{
        return{
            hasMeal:this.hasMeal        
        }
    },
    create(){
      fetch(xxx).then(res=>{
            this.hasMeal=res.data.hasMeal  //此时是true
        })
    }
}
</script>
///
孙组件
<template>
    <div> this is grandson component</div>
</template>
<script>
export {
    name:"grandparent",
    data(){
            return{
        }
    },
    inject:['hasMeal'],
    create(){
        console.log(this.hasMeal())    //true
    }
}
</script>