组件的通信方案

一.类组件的通信

组件的通信方案_第1张图片

例子:

组件的通信方案_第2张图片

函数组件间的通信

父组件中:

组件的通信方案_第3张图片

子组件:

组件的通信方案_第4张图片

子组件

组件的通信方案_第5张图片


二.基于上下文方案实现祖先和后代的传递

类组件:

组件的通信方案_第6张图片
当点击支持/反对的时候,把祖先放在上下文中,用来修改状态的方法执行,这样就可以修改祖先组件的状态! !祖先组件更新:会把最新的状态信息,重新放在上下文中! !后代组件也会跟着更新,从而获取最新的上下文信息进行绑定! !

1.创建上下文对象:在src的根目录下创建

组件的通信方案_第7张图片

2.让祖先组件Vote,具备状态和修改状态的方法,同时还需要把这些信息,存储到上下文中! ! !往上下文中放东西:

组件的通信方案_第8张图片

组件的通信方案_第9张图片

第3步:在后代组件中,我们需要获取上下文中的信息

  • VoteMain:获取信息绑定即可
  • VoteFooter:获取信息,把获取的函数(修改组件组件状态的函数),再
    点击支持/反对的时候执行! !

第一种方案:

组件的通信方案_第10张图片

第二种方案:
组件的通信方案_第11张图片

组件的通信方案_第12张图片

函数组件:

祖先组件中:

组件的通信方案_第13张图片

后代组件中:

方式1;

组件的通信方案_第14张图片

方式 2:

组件的通信方案_第15张图片

你可能感兴趣的:(重新学习react!!!!,vue.js,前端,javascript)