CRainyDay

在之前的项目基础上, 实现交互添加、交互删除功能.

首先, 要明白实现这些交互功能要先添加相应的事件监听. 之后, 要明白: 这些交互无非就是一些改变页面原始数据的操作. 即我们需要更新页面数据.

这里要知道: 数据在哪个组件定义的, 更新数据的方法就应该定义在哪个组件. 根据需要, 父组件将该方法传递给子组件, 子组件接收后调用它实现数据更新.

1.交互添加

在App组件中添加addComment方法, 来向comments数组中插入新的评论数据. 该方法不是在本组件中调用, 而是在Add组件中调用. 因此需要将该方法, 传递给其子组件Add. 传递的方法与传递数据的方法一致. 子组件声明接收属性后调用.

数组的unshift方法: 向数组的开头添加一个或更多元素,并返回新的长度. array.unshift(el1,el2,….,el3).

2.交互删除

在App组件中添加delComment(index)方法, 来在comments数组删除一条评论数据. 该方法不是在本组件中调用, 而是在Item组件中调用. 因此需要将该方法, 向下传递两次给其子孙组件Item. 传递的方法与传递数据的方法一致. 子组件声明接收属性后调用.

数组的splice方法: 用于添加或删除数组中的元素.array.splice(index,howmany,item1,…,itemX)

最后的示例项目src:

一定不要忘了, 在这个项目里我们引用了第三方库 bootstrap.css 需要在项目根目录的index.html中引入.


 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有