VUE3之Component（二）

非父子组件之间的通信

provide和inject的基本使用。

在上层组件中使用provide来定义数据给其子孙使用：

import Home from "./Home.vue";
    export default {
        components:{
            Home
        },
        provide:{
            name:"sk",
            age:18
        }
    }
</script>

在子孙组件中使用inject来使用上层组件定义的数据：

<template>
    <div>
        HomeContent: {{name}} - {{age}}
    </div>
</template>

<script>
    export default {
        inject:["name","age"]
    }
</script>