在之前的项目基础上, 实现交互添加、交互删除功能.
首先, 要明白实现这些交互功能要先添加相应的事件监听. 之后, 要明白: 这些交互无非就是一些改变页面原始数据的操作. 即我们需要更新页面数据.
这里要知道: 数据在哪个组件定义的, 更新数据的方法就应该定义在哪个组件. 根据需要, 父组件将该方法传递给子组件, 子组件接收后调用它实现数据更新.
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中引入.
