vue3-组合式api-provide/inject详解

<template>
  <div>
    <!-- 子组件 -->
    <son></son>
    <button @click="changeName">改变名字</button>
  </div>
</template>

<script>
import son from "./son.vue";

import { provide, ref } from "vue";

export default {
  components: {
    son,
  },
  setup() {
    const name = ref("张三");

    //把name提供出去
    provide("name", name);

    //改变名字
    function changeName() {
      name.value = "李四";
    }

    return {
      changeName,
    };
  },
};
</script>

<template>
  <div>
    <h2>我是子组件</h2>
    name: {{ name }}
    <!-- 孙组件 -->
    <grandson></grandson>
  </div>
</template>

<script>
import grandson from "./grandson.vue";
import { inject } from "vue";

export default {
  components: {
    grandson,
  },
  setup() {
    //依赖注入
    const name = inject("name");

    return {
      name,
    };
  },
};
</script>

<template>
  <div>
    <h2>我是孙组件</h2>
    name: {{ name }}
  </div>
</template>

<script>
import { inject } from "vue";

export default {
  setup() {
    //依赖注入
    const name = inject("name");

    return {
      name,
    };
  },
};
</script>

<template>
  <div>
    <div>
      <div>父：{{count}}</div>
    </div>
    <ChidlView></ChidlView>
    <button @click="ClickBtnChange">修改</button>
  </div>
</template>
<script lang="ts"  setup>
import { reactive, ref, getCurrentInstance, provide } from 'vue'
import ChidlView from './ChildView.vue'
const count = ref(0)
// 提供静态值
provide('foo', count)
const ClickBtnChange = () => {
  const random = Math.floor(Math.random() * 10 + 1)
  count.value = random
}
</script>

<template>
  <div class="ChildView">
   子：{{count}}
  </div>
</template>
<script lang="ts" name="ChildView" setup>
import { ref, watch, inject } from 'vue'
const count = ref(inject('foo'))
</script>