过滤器，事件，插槽与父子组件传递

1.编写 editCart 函数，使得能够修改商品数量和选中状态。

<a class="input-sub" v-on:click="editCart('minus', item)">-</a>

其中 editCart 函数可以直接传递参数，第一个参数代表加还是减，第二个参数是这个商品本身。
加法也同理。
同样 checked 也是这样，在函数中把他取反就可以了
2.编写过滤器

filters: {
            currency(value) {
                if (!value) return 0.00;
                return "¥" + value.toFixed(2) + "元";
            }
        },

3.使用过滤器：

<div class="item-price-total">{{item.productNum*item.productPrice | currency}}</div>

这样就会把这里边的那个数据格式化成为想要的格式。注意使用过滤器的时候只写过滤器的名字就行了，不能写成 currency()这种形式。
4.插槽
在 modal 组件中编写一个插槽

<slot name="message"></slot>

在使用插槽的地方使用插槽

<modal>
      <p slot="message">请问你你要删除此条元素吗</p>
</modal>

插槽的本质就是在一个组件里预留出来位置，然后在使用该组件的时候可以动态的向预留的位置中添加想要添加的东西。
4.控制 modal 的显示和关闭
首先为 modal 绑定一个属性来控制关闭还是打开

<modal :mdShow="modalConfirm">

这个变量 modalConfirm 必须在 data 里边定义
接下来点击删除按钮，出来确认弹框：

<a href="javascript:;" class="item-edit-btn" @click="delCartConfirm(item)">

//删除商品，打开对话框
            delCartConfirm(item) {
                //准备删除的对象
                this.delItem = item;
                this.modalConfirm = true;
            }

删除 modal.vue 中的 display：none 属性

接下来是如何把 mdShow 这个属性从 cart 传递给 modal，首先在 modal 的 props 中定义这个属性

在子组件中定义弹框的关闭事件，但是不是直接关闭，而是调用父组件传参进行关闭

<button class="md-close" @click="closeModal">关闭</button>  

methods: {
            closeModal() {
                this.$emit('close');
            }
        }

父组件中如何接受这个 close

<modal :mdShow="modalConfirm" @close="closeModal">

closeModal() {
                this.modalConfirm = false;
            }

最后把 md-show 这个类用 mdShow 这个元素绑定上去

<div class="md-modal modal-msg md-modal-transition" v-bind:class="{'md-show': mdShow}">

这一部分比较混乱，现在来捋一捋。首先按照顺序，正向，点击删除按钮，弹出对话确认框，触发 delCartConfirm 事件，modalConfirm 变成 true，接着 mdShow 也变成 true，mdShow 传递给子组件 modal 里，创建那个 md-show 类，显示出来对话框。

接着对话框打开之后如何关闭。首先 modal 里边的关闭按钮触发关闭事件 closeModal，该函数调用了 emit，即调用父组件传递给一个 close 参数，接着在父组件中寻找 @close，然后触发父组件的 closeModal 事件，把 modalConfirm 变成 false，接着 mdShow 也变成 false，这个就同上，删除 md-show 的类，对话框消失。

今天天气好冷啊。。。。😣