好家伙，

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怎么处理,

第八十一篇：Vue购物车(二) 名称,图片,价格的渲染的相关教程结束。