provide与inject（实现祖与后代组件间通信）

• 作用：实现祖与后代组件间通信
• 套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据
• 具体写法：

   1.祖组件中

<template>
  <div class="home" >
    <div style="background: darkorange;height:100px;">
      {{justN}}
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"  >出来吧</HelloWorld>
    <button @click="tap">修改子组件的内容</button>
  </div>
</template>
<script>
    import HelloWorld from '@/components/HelloWorld.vue'
    import {ref,provide} from 'vue'
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      setup(){ 
        let justN=ref('必须努力');
        provide('content',justN);
        function tap() {
          //当调用方法修改justN的值时provide则自动根据justN的变化将值发送给后代组件
          justN.value='修改了';
        }
        return{
          tap, 
          justN
        }
      }
    }
</script>

2.后代组件中：

<template>
    <div style="height:100px;background: crimson;"> 
        {{content}}
    </div>
</template>

<script>
    import {inject} from 'vue'
    export default {
        name: "helloWorldSon",
        setup(){
            let content=inject('content');
            return{
                content
            }
        }
    }
</script>