vue3跨级组件通信方法（详解provide和inject函数）

vue3中provide和inject函数提供依赖注入，功能类似 vue2.x 的provide/inject，实现跨层级组件(祖孙)间通信。

子或孙子组件接收到的数据可以用于读取显示，也可以进行修改，同步修改父（祖）组件的数据。

注意：无论子组件是否接收了该数据，孙子组件都可使用inject接收修改该数据。

（祖）父组件代码：

子组件代码：

孙子组件代码：

初始页面效果：

初始页面显示结果：子和孙子组件都接收到了同样的数据显示。

2秒后（祖）父修改了数据页面效果：

2秒后页面显示结果：子和孙子组件都接收的数据同步发生了修改。

点击孙子组件的修改父组件传来信息按钮修改数据后》页面效果：

孙子组件将接收的数据修改后，父（祖父）的数据也同步被修改。