provide和inject成对使用，用于父子组件、父孙组件的变量、方法传递。
1.单向传递，只能父传子
2.多层次透传，父组件的变量、方法，可以透传到多个子组件、孙组件
父组件使用
// demo.vue
<template>
<div>
<div class="mt-5">=======父组建=======</div>
<div>{{title}}</div>
<demo-item></demo-item>
</div>
</template>
<script>
import demoItem from "./demo-item.vue"
export default {
components:{
demoItem,
},
data() {
return {
title:'标题'
}
},
provide(){
return {
title: this.title,
rename: this.rename,
}
},
methods:{
rename(data){
console.log(data);
this.title = data
}
}
}
</script>
<style>
</style>
子组件使用
//demo-item.vue
<template>
<div>
<div class="mt-5">=======子组建=======</div>
<div>子组建标题</div>
<button class="btn btn-primary" @click="rename('子'+ Math.floor(Math.random()*100,2))">子改父</button>
<demo-item2></demo-item2>
</div>
</template>
<script>
import demoItem2 from "./demo-item2.vue"
export default {
components:{
demoItem2
},
data() {
return {
}
},
inject:['title', 'rename']
}
</script>
<style>
</style>
孙组件使用
//demo-item2.vue
<template>
<div>
<div class="mt-5">=======孙组建=======</div>
<div>孙组建标题</div>
<button class="btn btn-primary" @click="rename('孙'+ Math.floor(Math.random()*100,2))">孙改父</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
inject:['title', 'rename']
}
</script>
<style>
</style>
