Vue.js商品列表管理：组件化开发与插槽技术实战

1. 项目概述与核心功能

这是一个基于Vue.js框架开发的商品列表管理案例，主要用于学习Vue的多文件组件开发模式。项目实现了一个可交互的商品表格展示系统，包含以下核心功能：

• 商品数据的表格化展示（编号、名称、图片、标签）
• 标签的双击编辑功能（使用v-model语法糖实现双向绑定）
• 全局指令实现输入框自动聚焦
• 使用具名插槽和作用域插槽实现表格组件的灵活定制

这个案例特别适合已经掌握Vue基础语法，想要进阶学习组件化开发和插槽技术的开发者。我在实际教学和项目开发中发现，这类综合案例能帮助开发者快速理解Vue的组件通信机制和复用思想。

2. 核心知识点解析

2.1 子组件v-model的实现原理

在MyTag组件中，我们实现了自定义组件的v-model功能。这是Vue中非常重要的一个特性，理解其原理对组件开发至关重要。

v-model本质上是一个语法糖，在Vue 2.x版本中，它相当于：

javascript复制:value="item.tag" 
@input="item.tag = $event"

在MyTag组件中，我们通过props接收value值，并在输入完成后通过this.$emit("input", e.target.value)触发input事件，实现了父子组件间的双向绑定。

注意：Vue 3.x中v-model的实现机制有所变化，默认使用modelValue作为prop名和update:modelValue作为事件名。如果项目使用Vue 3.x，需要相应调整实现方式。

2.2 全局指令的封装与应用

在main.js中，我们封装了一个全局指令v-focus：

javascript复制Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

这个指令会在元素被插入DOM后自动获取焦点。指令的生命周期钩子包括：

• bind：只调用一次，指令第一次绑定到元素时调用
• inserted：被绑定元素插入父节点时调用
• update：所在组件的VNode更新时调用
• componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用
• unbind：只调