vue中组件通信1(props)

一、数据存储部分
即是要解决存什么数据，什么时候读取，当一有对数据相关操作时要更新数据

1. data中的数据不能写死了，需要从localStorage中读取数据
   使用window.localStorage.getItem(‘todos_key’)//但是这里获取到的是文本数据，因此需要得到key-value的形式，将其转换为JSON格式：（因为todos这里是一个JSON格式的数组）-------所以在监视中setItem存储的数据类型要相对应
   

‘[ ]‘表示当为空时解析的文本

2…用到深度监视（watch）
深度监视的语法模板

二、数据交互部分

数据的交互一般从绑定事件监听开始
比如在提交按钮中添加@click=”add”
即用户发表评论，然后将用户发表的评论显示出来

***这里演示数据的添加，由于只涉及到两个板块，即App与Add组件

1. 由于添加按钮在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再直接调用实现

③然后在List组件中通过props来声明接收的deleteComment，同时在List.vue中的通过<Item>标签将deleteComment函数传给Item组件，由于deleteComment函数是通过index删除的，由于之前使用v-for遍历comments时有index属性，因此这里也需要使用 :index=”index”将index属性传给Item组件，具体入下：

2. 最后在Item组件中通过props声明接收deleteComment（同时定义comment与index的类型），然后再deleteComment函数中调用该函数实现删除数据