Vue插槽实现商品列表-编辑渲染

商品列表

---

核心步骤

MyTag 组件的封装

1. 创建组件 → 初始化

2. 实现功能

   （1）双击显示，并开启自动聚焦

​ 1. v-if v-else @dblclick

​ 2. 通过注册全局的自定义指令获取焦点 focus

（2）失去焦点的时候，隐藏输入框

​ 1. 然后使用@blur失去焦点隐藏

（3）回显标签信息

1. 回显的标签信息是父组件传递过来的

     2. 使用 v-model 实现功能（简化代码）
     3. v-model ===> ：value  和 @input
   

   （4）内容修改了，回车 → 修改标签信息

​ 1. @keyup.enter ，触发了回车事件 执行 $emit(‘input’,e.target.value)

​ 2. 然后父组件中的 v-model 底层的 @input自动帮我们执行数据渲染回显

---

My-Table 表格组件的封装

1. 数据不能写死，需要动态的传递表格渲染数据

​ 使用： props

2. 结