Vue3$Data-ProvideAndInject
0. Provide and Inject in Big Picture
父组件给子组件传参数，使用 props。
祖先组件给后代组件传参数，使用 provide 和 inject。（也可以父子）
1. provide 提供数据
<script setup>
import { provide } from 'vue'
provide(/* key */ 'message', /* value */ 'hello!') // key: String / Symbol
</script>
App-level Provide
import { createApp } from 'vue'
const app = createApp({})
app.provide(/* key */ 'message', /* value */ 'hello!')
2. inject 接受数据
<script setup>
import { inject } from 'vue'
const message = inject('message')
</script>
Default Values
const value = inject('message', 'default value')
const value = inject('key', () => new ExpensiveClass(), true) // factory function
3. Best Practices
改变数据的方法要和数据放在一起，一起provide。
可以通过readonly防止数据被误改。
<script setup>
import { ref, provide, readonly } from 'vue'
const count = ref(0)
provide('read-only-count', readonly(count))
</script>
