<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)
// 提供靜態(tài)值
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>