什么是非父子组件通信

本篇内容主要讲解"什么是非父子组件通信"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"什么是非父子组件通信"吧!

目录

• App.vue

• Home.vue

• HomeContent.vue

• 数据的响应式

• 修改响应式Property

  
  

业务场景是，不是父子组件实现通信

文件目录

App.vue

Home.vue

HomeContent.vue

vue3中使用Provide函数和Inject函数

事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的选项。

我们可以通过 provide来提供数据：

provide可以传入两个参数：

name：提供的属性名称；

value：提供的属性值；

在 后代组件 中可以通过 inject 来注入需要的属性和对应的值：

可以通过 inject 来注入需要的内容；

inject可以传入两个参数：

要 inject 的 property 的 name；

默认值；

数据的响应式

为了增加 provide 值和 inject 值之间的响应性，我们可以在 provide 值时使用 ref 和 reactive。

修改响应式Property

如果我们需要修改可响应的数据，那么最好是在数据提供的位置来修改：我们可以将修改方法进行共享，在后代组件中进行调用；

注意

如果我们子组件应该是只能使用，不能修改的状态

到此，相信大家对"什么是非父子组件通信"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！