09-发布文章-封面组件-双向绑定
- 双向绑定的数据-图片地址:v-model=“articleForm.cover.images[0]”
src/components/my-image.vue中作为子组件操作
publish/index.vue作为父组件操作
父给子
export default里声明:
props: ['value'], //子组件接受数据
div盒子里面图片按钮中进行操作:
<img :src="value||defaultImage" alt /> //使用数据和默认数据
// data里申明一个默认图数据
defaultImage
子给父
methods中confirImage点击确认图片的方法函数中:
// 给图片按钮的src赋值 看到你选择的封面图片
// this.confirmSrc = url
// 把你确认的图片地址 提交给父组件
this.$emit('input', url)
10-发布文章-封面组件-使用组件
组件内部:src/components/my-image.vue
.img-container{
display: inline-block; //转为行内块,平铺图片
margin-right: 20px;
}
使用组件:publish/index.vue
<!-- 封面选择组件 -->
<div v-if="articleForm.cover.type===1">
<my-image v-model="articleForm.cover.images[0]"></my-image>
</div>
<div v-if="articleForm.cover.type===3">
<my-image v-model="articleForm.cover.images[0]"></my-image>
<my-image v-model="articleForm.cover.images[1]"></my-image>
<my-image v-model="articleForm.cover.images[2]"></my-image>
</div>
重置数据:publish/index.vue
<el-radio-group @change="changeType"
publish/index.vue中的methods
changeType () {
// 选择过封面类型的时候 重置数据
this.articleForm.cover.images = []
}