二、数据交互部分
数据的交互一般从绑定事件监听开始
比如在提交按钮中添加@click=”add”
即用户发表评论，然后将用户发表的评论显示出来
***这里演示数据的添加，由于只涉及到两个板块，即App与Add组件
- 由于添加按钮在Add.vue.组件中，因此在Add.vue组件中的提交按钮中添加@click事件监听，如
2.由于数据在哪个组件，更新数据的行为（方法）就应该定义在哪个组件，正如现在，由于数据comments定义在App.vue组件中因此对数据的操作应该在App.vue组件中
因此需要在App.vue中定义相关函数的操作，在通过标签将所定义的函数传给Add，然后再在Add.vue中声明接收即可调用。
① 在App.vue中定义addComment函数如下（用于添加用户输入的评论信息）
② 然后在标签中将这个函数以属性addComment的方式传给Add.vue组件，如下：
③ 在Add.vue组件中使用props进行声明，即接收App.vue传过来的对数据的添加操作
在这里，指定addComment的类型是一个函数
④ 然后即可在Add.vue组件中定义的函数add中通过this调用这个addComment的相关操作，具体如下：
首先是需要对于输入文本框（用于填写用户名与用户评论）添加v-model指令，用于数据的双向绑定
在data() 函数中，返回使用v-model双向绑定的数据显示
然后在按钮所定义的add函数中，首先使用this.name.trim()来获取用户输入的内容，然后判断是否合法，若不合法，则终止操作，如果合法，则将其添加到comments对象中
由于在App.vue组件中定义的添加信息函数的参数是comments对象，因此需要将用户输入的信息先封装成一个对象的形式，然后再将其传给函数，达到更新数据的效果，如下:
***这里演示数据的删除操作
操作的原理类似于数据的添加，只是这里设计的组件分别有App、List、Item，且三者之间是逐级传递的。
1.首先，由于删除相关标签定义再Item组件中，因此需要在Item组件中的相应标签定义相关的监听事件，如：
2.由于删除的时候也是需要更新数据，同理于addComment，需要在App.vue组件中定义相关的删除数据操作，然后再将该操作函数传回给Item.vue组件以调用**（只是此时的回传方式要以List.vue组件为中间体）**
①在App.vue组件中定义的deleteComment函数如下，（这里的函数名要以Item中props接收的属性名一致）
在这里，所用的splice函数以数组下标删除信息，每次删除一条数据
②然后通过在App.vue组件中的标签将这个函数首先以deleteComment属性传给List，List再将之传给Item，Item再直接调用实现
