分清页面结构 ，以如下图举例。

image.png

如上图所示 ，页面可以分为三个组件。

父组件和子组件的索命：父组件其实就是index.ets组件，而瞎编第一第二第三层级的都是子组件。

第一层级的组件。

顶部的 topview组件，里面可以进行封装一下，作为后续其他页面肯定常用的。

image.png
image.png

1该组件主要的重点是 @Extend 的用法，可以用来封装使用控件的常见属性，并且在里面判断对应的不用状态显示不同的样式。
2 export default TopInfo 这个主要是用来对外导出该组件，让其他的组件可以引用。
3 @State ison: boolean = true; 装饰器 主要是用来定一个变量来尽情来回切换。

image.png

第二层层级的组件

image.png

1 这个部分主要的是一个后续开发常用的list组件，里面使用foreach循环进行循环复制，在循环里面我们使用 ListItem 这个组件，这个是每一项的数据的组件 。我们可以在里面设置每个item的具体样式的布局。然后还可以将具体的样式布局 再单独抽出去作为一个子组件使用即可。
2 list组件有许多的操作属性，大部分无需设置，默认为垂直方向的。感兴趣的可以自己自行设置看一下具体的效果。
3 注意this指向问题，一定要配合箭头函数使用，不然会出现指向问题

image.png

错误的示范

image.png
4 因为我们需要点赞来修改点赞数量和是否点赞的数据，而该数据是位于父组件的数据集合中，我们的修改主要逻辑就是 子组件修改父组件的数据并且刷新ui即可，那么就需要父组件向子组件传递方法即可，并且传递对应的位置的标识可以用id或者下标，这里就需要注意箭头函数
image.png
当用户点赞后就会在子组件中更新父组件中的方法 并且打印出来对应的数据。
image.png
如果出现指向性问题如图上所示，this不使用箭头函数，那他指向的就是子组件 就无法拿到父组件中的数据 也就无法更新ui了。

5 父组件刷新数据如图

image.png
api11 中应该可以不需要考虑第几层数据的问题了，可以自动刷新，我这是api9的，要用splice来更新某一项的数据 他就可以自动刷新界面了。
6 list 中listitem中封装的组件如图:
image.png image.png

@prop 主要是用来单向传递数据的，在for循环中把数据传递给子组件单向的传递。子组件接受数据展示出来就可以了。
这块主要是单向的数据传递，以及子组件如何界面，其实还是要靠父组件的方法去刷新界面。

第三层级

image.png image.png

底部的其实就是一个输入框组件，我们需要做的就是把用户输入输入框的数据返回到父组件中，然后调用父组件中定义的方法把输入的输入放在集合的最上边更新界面即可，这个流程也是需要父组件传递方法给子组件，子组件把数据回传给父组件后，父组件调用自己定义的一个方法把数据加到集合第一条，更新ui即可。注意 $$这个是用来双向绑定的输入框的内容的。把输入框的数据回传给父组件，让父组件去更新界面。

image.png

如图父组件去新增数据即可

综上：@state 用来绑定刷新ui界面。@prop用来单向的传递数据，而子组件要动态的变化则需要由父组件传递方法给子组件，然后子组件调用父组件传递过来的方法和参数来调用父组件中的方法来更新数据刷新UI即可。