织梦门户网站,有趣网站建设无聊,开发定制软件,高效简便的网站开发一、需求 二、在父组件upload-cover中#xff1a;
通过$refs[子组件的ref属性值]就能拿到子组件对象
三、在子组件imgae-list#xff08;相对于父组件upload-cover来说#xff0c;image-list组件是子组件#xff09;中
通过在data中定义一个selected#xff0c;来保存…一、需求 二、在父组件upload-cover中
通过$refs[子组件的ref属性值]就能拿到子组件对象
三、在子组件imgae-list相对于父组件upload-cover来说image-list组件是子组件中
通过在data中定义一个selected来保存当前选中的封面图片的索引这样父组件upload-cover可以通过$refs[image-list]就能拿到子组件对象,然后通过$refs[image-list].selected拿到 已选中的封面图片的索引
四、在子组件upload-cover相对于index组件来说upload-cover组件是子组件
通过$emit(input, imageList.image[selected].url),将已选中的封面图片的url传递给父组件让父组件展示已选中的图片并方便父组件将数据提交到服务器。
五、在父组件index组件中 当我们给子组件提供的数据既需要使用又需要修改时这个时候我们可以使用v-model简化 v-modelarticle.cover.images[index]相当于下面两行代码 value “article.cover.images[index]” 给子组件传递了一个名字叫value的数据 input “article.cover.images[index]” 默认监听input事件当事件发生时 他会绑定数据 事件参数 使用v-model进行数据的双向绑定
默认会监听input事件接收到子组件upload-cover传递过来的已选中封面图片的url默认会 v-bind:value v-model绑定的数据即当父组件中v-model绑定的数据发送改变时在子组件中可以通过声明props: [‘value’] 然后在需要使用数据的地方v-bind绑定value即可
