Vue3| 组合式 API——provide 和 inject

作用和场景：顶层组件向任意的底层组件 传递数据和方法，实现 跨层组件通信

跨层传递普通数据 步骤：

1. 顶层组件通过 provide 函数提供数据

provide ( ' key ' ,  顶层组件中的数据 )

2. 底层组件通过 inject 函数获取数据

const  message = inject ( ' key ' )      // 'key'：键名，与上一步的名字统一

跨层传递响应式数据 步骤：

1. 顶层组件通过 provide 函数提供数据

const  count = ref (100)

provide ( ' count ' ,  count )

2. 底层组件通过 inject 函数获取数据

const  count = inject ( ' count ' )      // 'key'：键名，与上一步的名字统一

底层组件 不能直接修改 顶层组件传过来的数据，顶层组件需要给底层组件提供可以修改数据的函数

顶层组件：

provide ( ' changeCount ' ,  (newCount) => {

      count.value = newCount

})

底层组件：

const changeCount = inject ( ' changeCount ' )

const  ButtonClick = () => {

      changeCount (666)

}