第八十一篇：Vue购物车(二) 名称,图片,价格的渲染

好家伙，

 

1，为组件封装属性，

需要封装以下属性：

需要定义的属性	属性名	值的类型
商品名	title	String
商品图片	pic	String
商品价格	price	Number
是否勾选	state	Boolean

 

 

 

 

 

 

 

 

 

通过props为属性传值

 

上代码:

Goods.vue组件：

<template>
  <div class="goods-container">
    <!-- 左侧图片 -->
    <div class="thumb">
      <div class="custom-control custom-checkbox">
        <!-- 复选框 -->
        <input type="checkbox" class="custom-control-input" id="cb1" :checked="state" />
        <label class="custom-control-label" for="cb1">
          <!-- 商品的缩略图 -->
          <img :src="pic" alt="" />
          <img src="../../assets/1.jpg" alt="">
         
        </label>
      </div>
    </div>
    <!-- 右侧信息区域 -->
    <div class="goods-info">
      <!-- 商品标题 -->
      <h6 class="goods-title">我的名字是:{{ title }}</h6>
      <div class="goods-info-bottom">
        <!-- 商品价格 -->
        <span class="goods-price">{{ price }}￥</span>
        <!-- 商品的数量 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    //商品名字
    title:{ 
      default:'',
      type:String
    },
    //商品图片
    pic:{
      default:'',
      type:String
    },
    //商品价格
    price:{
      default:0,
      type:Number
    },
    //商品的勾选状态
    state:{
      default:false,
      //是否勾选,所以是布尔值类型
      type:Boolean
    }
  }
}
</script>

这里我们用一个插值表达式{{}}去拿到props中的值并把它渲染出来

 

来到App.vue这边

App.vue完整代码

 

主要来看其中的组件调用部分

    <Goods v-for="item in list" 
    :key="item.id" 
    :title="item.goods_name" 
    :pic="item.goods_img"
    :price="item.goods_price"
    :state="item.goods_stats"></Goods>

 

看看效果:

 

 图片那块出了点bug

 

2.如何修改商品的勾选状态:

这里涉及到父子传值了

1．在子组件中，要监听复选框 状态变化的事件。拿到最新的勾选状态<input type="checkbox"@change="stateChange"/>

只要复选框的勾选状态发生了变化，会自动触发 change事件！

 

2．当监听到勾选状态变化之后，应该立即把最新的状态，通过自定义事件的形式，发送给父组件。

this.$emit('state-change', { id,value})

其中，id表示当前这件商品的id，value的值是最新的勾选状态

 

上代码:

App.vue中添加代码

<Goods v-for="item in list" 
    :key="item.id" 
    :id="item.id"
    :title="item.goods_name" 
    :pic="item.goods_img"
    :price="item.goods_price"
    :state="item.goods_stats"
    @state-change="getNewState"></Goods>

添加方法自定义方法:

methods:{
    //封装请求列表数据的方法
    //接受子组件传递过来的数据
    //e的格式为{id,value}
    getNewState(val){
      console.log('父组件成功接受值')
      this.list.some(item=>{
        item.goods_state=e.value
        //终止后续的循环
        return true
      })
    }
  },

 

Good.vue中添加代码

为复选框绑定方法:

<input type="checkbox" 
        class="custom-control-input" 
        id="cb1" 
        :checked="state" 
        @change="stateChange"/>

@change当input

添加自定义方法:

e.target.checked是勾选框的状态(true或false)

methods:{
     stateChange(e){
       const newState = e.target.checked
      //触发自定义事件
      this.$emit('state-change',{id:this.id,value:newState})
     }
  }

 

但是依旧有bug,比如点了第三个,第一个的勾选被取消了

 

 

 我们绑个id来解决这个问题

Goods.vue中

<div class="custom-control custom-checkbox">
        <!-- 复选框 -->
        <input type="checkbox" 
        class="custom-control-input" 
       
        //原先为id="cb"
        :id="'cb'+id" 
        :checked="state" 
        @change="stateChange"/>
        
        //原先为for="cb"
        <label class="custom-control-label" :for="'cb'+id">
          <!-- 商品的缩略图 -->
          <img :src="pic" alt="" />
          <img src="../../assets/1.jpg" alt="">
         
        </label>
      </div>            

 

搞定!

 

我得想想图片的bug怎么处理,