Vue2.0开发之——插槽-基于slot插槽修改购物车案例(61)

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • 购物车的事件传递分析
  • 基于slot插槽修改购物车案例过程

二 购物车的事件传递分析

2.1 事件传递示意图

2.2 事件传递说明

  • Counter组件——>Goods组件——>App：Counter传递给Goods，Goods传递给App，一层层嵌套
  • Counter组件——>App，Counter通过EventBus传递给App

三 基于slot插槽修改购物车案例过程

3.1 Goods组件中将Counter组件使用插槽slot占位

修改前(Counter组件)

1
<Counter :num="count" :id="id"></Counter>

修改后(Counter组件替换为slot)

1
<slot></slot>

3.2 将App.vue中的Goods组件计算部分使用Counter组件

导入Counter组件并注册

1
2
3
4
5
6
7
8
9
//导入组件
import Counter from '@/components/Counter/Counter.vue'
//注册组件
 components: {
    Header,
    Goods,
    Footer,
    Counter
  }

将Goods组件的插槽替换为Counter(此时所有count值为默认值1)

1
2
3
4
5
6
7
8
9
10
11
12
<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_state"
      :count="item.goods_count"
      @state-change="getNewState">
      <Counter></Counter>
  </Goods>

3.3 Goods组件中的数值显示

Counter组件

定义num

1
2
3
4
5
6
7
export default {
  props: {
    num: {
      type: Number,
      default: 1
    }
  },

显示num

1
<span class="number-box">{{ num }}</span>

App.vue组件通过Counter传值(初始值已修改)

1
<Counter :num="item.goods_count"></Counter>

修改后，效果图

3.4 点击+、-修改Counter 的值

Counter.vue组件中——子传父

界面点击事件

1
2
3
4
5
6
7
8
9
10
<template>
  <div class="number-container d-flex justify-content-center align-items-center">
    <!-- 减 1 的按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="sub">-</button>
    <!-- 购买的数量 -->
    <span class="number-box">{{ num }}</span>
    <!-- 加 1 的按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="add">+</button>
  </div>
</template>

界面对应的方法

1
2
3
4
5
6
7
8
9
methods: {
    add() {
      this.$emit('num-change', this.num + 1)
    },
    sub() {
      if (this.num - 1 === 0) return
      this.$emit('num-change', this.num - 1)
    }
  },

App.vue中接收事件

插槽接收事件

1
<Counter  :num="item.goods_count" @num-change="getNewNum(item,$event)"></Counter>

getNewNum事件处理

1
2
3
getNewNum(item,event){
      item.goods_count =event
 }

效果图