(尚024)Vue_案例_交互删除

注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!!

首先明白,删除在Item.vue中交互

1.写交互,首先写监听@click="deleteItem"(不要用delete,因为是关键字)

 2.写对应的方法

 3.App.vue中删除指定下标的评论

 4.deleteComment()这个方法最终要传给Item.vue 组件

但Item.vue现在看不到,需要逐层传递

 5.List.vue中需要声明deleteComment属性,

 6.声明属性,但是本身我也不用,我叫Item去用,:deleteComment="deleteComment"

 7.在Item.vue中声明

 8.现在可以在if(){}中调用deleteComment(),但是没有传index

9.List.vue中传递index ,:index="index"

 10.需要在Item.vue中声明index为number类型,index:number

 

 11.全部删除后出现问题截图

 12.修改List.vue组件

 comments.length===0没数据的时候才会显示

13.运行截图:

 这儿没有去刷新界面,用到了hmr技术(热替换),不是完整的去更新整个模块,而是只更新了自己更改的模块,自己原来的窗口还在.