发布文章（六）-封面组件-双向绑定应用 & 使用组件-图片按钮上传-按钮切换并清零操作

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 = []
    }