Class3 组件间信息通讯provide/inject

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>