<template>
  <div>
    <h1>我是祖先組件</h1>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  name: 'AncestorComponent',
  components: {
    ChildComponent
  },
  // 提供一個(gè)名為message的數(shù)據(jù)
  provide: {
    message: 'Hello from ancestor'
  }
}
</script>

<template>
  <div>
    <h2>我是后代組件</h2>
    <p>{{ message }}</p>
  </div>
</template>

// 后代組件
<script>
export default {
  name: 'ChildComponent',
  // 接收一個(gè)名為message的數(shù)據(jù)
  inject: ['message']
}
</script>

<template>
  <div>
    <h1>我是提供者組件</h1>
    <button @click="count++">增加計(jì)數(shù)</button>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide } from 'vue'
export default {
  name: 'ProviderComponent',
  components: {
    ChildComponent
  },
  setup() {
    // 使用ref創(chuàng)建一個(gè)響應(yīng)式的計(jì)數(shù)器
    const count = ref(0)
    // 提供給后代組件
    provide('count', count)
    return {
      count
    }
  }
}
</script>

<template>
  <div>
    <h2>我是接收者組件</h2>
    <p>計(jì)數(shù)器的值是：{{ count }}</p>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者組件提供的響應(yīng)式對(duì)象
    const count = inject('count')
    return {
      count
    }
  }
}
</script>

<template>
  <div>
    <h2>我是接收者組件</h2>
    <p>計(jì)數(shù)器的值是：{{ count }}</p>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者組件提供的響應(yīng)式對(duì)象
    const count = inject('count')
    return {
      count
    }
  }
}
</script>

<template>
  <div>
    <h2>我是接收者組件</h2>
    <p>消息是：{{ message }}</p>
    <button @click="updateMessage">更改消息</button>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者組件提供的響應(yīng)式對(duì)象和方法
    const { message, updateMessage } = inject('message')
    return {
      message,
      updateMessage
    }
  }
}
</script>

<template>
  <div>
    <h1>我是提供者組件</h1>
    <p>姓名是：{{ name }}</p>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import { ref, provide, readonly } from 'vue'
export default {
  name: 'ProviderComponent',
  components: {
    ChildComponent
  },
  setup() {
    // 使用ref創(chuàng)建一個(gè)響應(yīng)式的姓名
    const name = ref('Alice')
    // 使用readonly包裝提供的值，使其不可修改
    provide('name', readonly(name))
    return {
      name
    }
  }
}
</script>

<template>
  <div>
    <h2>我是接收者組件</h2>
    <p>姓名是：{{ name }}</p>
    <button @click="name = 'Bob'">嘗試修改姓名</button>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  name: 'ChildComponent',
  setup() {
    // 接收提供者組件提供的只讀對(duì)象
    const name = inject('name')
    return {
      name
    }
  }
}
</script>