<template>
  <div>
    <h1>我是父組件 {{num}}</h1>
    <hr>
    <child></child>
  </div>
</template>
<script setup>
import child from './child.vue';
import { ref,provide } from 'vue';
let num = ref(520)
provide('parentNum',num)
</script>

<template>
  <div>
    <h2>我是子組件</h2>
    <hr>
    <grandchild></grandchild>
  </div>
</template>
<script setup>
import grandchild from './grandchild.vue';
</script>

<template>
  <div>
    <h3>我是孫子組件</h3>
    <p>這是爺爺?shù)闹?{{parentNum}}</p>
    <button @click="handler">點擊我爺爺?shù)闹禍p100</button>
  </div>
</template>
<script setup>
import { inject } from 'vue';
let parentNum = inject('parentNum')
const handler = () => {
  parentNum.value -= 100
}
</script>

<script setup>
import { provide, ref } from 'vue'
import son from './son.vue'
let msg = ref('xjj')
// 在父組件中將 msg 設(shè)置為依賴注入：能夠在所有的后代組件中使用這些數(shù)據(jù)
provide('msg', msg)
</script>
<template>
  <h2>05-組合式API - 依賴注入</h2>
  <h3>父組件</h3>
  <div>msg: {{ msg }}</div>
  <son></son>
</template>
<style></style>

<script setup>
import { inject } from 'vue'
import gson from './gson.vue'
let msg = inject('msg')
</script>
<template>
  <h3>子組件</h3>
  <div>msg: {{ msg }}</div>
  <gson></gson>
</template>
<style></style>