开发笔记:父组件访问子组件中的数据（父子组件通信案例：父组件访问子组件$refs[‘子组件‘]，子组件传递数据给父组件（父组件中使用vmodel））

一、需求

二、在父组件upload-cover中&＃xff1a;

通过$refs[&＃39;子组件的ref属性值&＃39;]就能拿到子组件对象

三、在子组件imgae-list&＃xff08;相对于父组件upload-cover来说&＃xff0c;image-list组件是子组件&＃xff09;中

通过在data中定义一个selected&＃xff0c;来保存当前选中的封面图片的索引&＃xff0c;这样父组件upload-cover可以通过$refs[&＃39;image-list&＃39;]就能拿到子组件对象,然后通过$refs[&＃39;image-list&＃39;].selected拿到 已选中的封面图片的索引

四、在子组件upload-cover&＃xff08;相对于index组件来说&＃xff0c;upload-cover组件是子组件&＃xff09;

通过$emit(&＃39;input&＃39;, imageList.image[selected].url),将已选中的封面图片的url传递给父组件&＃xff0c;让父组件展示已选中的图片&＃xff0c;并方便父组件将数据提交到服务器。

五、在父组件index组件中

当我们给子组件提供的数据既需要使用&＃xff0c;又需要修改时&＃xff0c;这个时候我们可以使用v-model简化
v-model&＃61;"article.cover.images[index]相当于下面两行代码&＃xff1a;
&＃xff1a;value &＃61; “article.cover.images[index]” 给子组件传递了一个名字叫value的数据
&＃64;input &＃61; “article.cover.images[index]” 默认监听input事件&＃xff0c;当事件发生时&＃xff0c;
他会绑定数据 &＃61; 事件参数

使用v-model进行数据的双向绑定

1. 默认会监听input事件&＃xff0c;接收到子组件upload-cover传递过来的已选中封面图片的url
2. 默认会 v-bind:value &＃61; v-model绑定的数据&＃xff0c;即当父组件中v-model绑定的数据发送改变时&＃xff0c;在子组件中可以通过声明props: [‘value’]
   
   然后在需要使用数据的地方v-bind绑定value即可