案例展示：点击进入

步骤及其操作方法：

MyTag标签组件封装

1、双击显示输入框，输入框获取焦点

首先，拆分组件，将App.vue中的代码封装为一个组件，App.vue内的Tag标签独立封装出去，然后给页面内的标签修改使用 v-if v-else 以及点击事件等实现双击输入框，然后封装了一个全局指令v-focus指令，实现输入框获取焦点
操作步骤：
1. 拆分组件，将App.vue中的Tag代码，拆分到一个新的组件MyTag.vue中 [见下图1]
2. 给input框和标签展示框添加v-if 和 v-else 实现标签显示隐藏。 [见下图2]
3. 给标签展示框添加 @dblclick 双击事件，使双击标签框时切换成输入框 [见下图3]
4. 封装一个v-focus指令，作用是输入框显示是，自动获取焦点 [见下图4]

2、失去焦点，隐藏输入框

当输入框输入完毕失去焦点的时候，自动触发回显到标签展示框，隐藏输入框。
操作步骤：
1. 设置 @blur 失去焦点时触发的命令，作用是回显标签展示框 [见下图1]

3、回显标签信息

将我们输入框中的信息和Vue中的信息进行双向绑定并且需要父子通信，使用v-model
操作步骤：
1. 在父组件App.vue中MyTag标签中绑定一个v-model 进行双向父子绑定 [见下图1]
2. 子组件通过props 接受并指定数据类型，然后使用插值表达式展示到标签展示框中 [见下图2]
3. 子组件input框接受使用父组件的数据value [见下图3]
4. 给input框添加一个键盘回车事件，点击回车时将数据传给父组件并回显展示框 [见下图4]

MyTable标签组件封装

数据不能写死：
需要动态表格数据渲染
结构不能写死：
表头结构自定义
主体结构自定义

MyTable标签组件封装
操作步骤：
1. 新建MyTable组件，将App.vue组件中的MyTable表格代码以及CSS封装出去
2. 导入组件，注册组件，使用组件
3.

1、动态传递表格数据渲染

数据在父组件，展示内容在子组件，首先需要父子通信，将父组件的数据传递给子组件，然后子组件接收数据后，v-for进行数据渲染
操作步骤：
1. 父组件将数据传递给子组件，然后子组件props接受并确认数据类型 [见下图1]
2. 子组件接受收，使用v-for循环渲染数据和插值表达式添加到页面 [见下图2]

2、表头支持用户自定义

将表格封装后，他的数据结构已经写死了，但是我们不需要将他写死，所以我们要用到具名插槽，将表头结构提出来，方便我们修改
操作步骤：
1. 将表头位置修改为<slot>插槽位置，在App.vue的MyTable组件内部写一个template [见下图1]
2. 将表头位置的数据，粘贴过来到template中来使用插槽

3、主体支持用户自定义

将表头使用插槽单独拉出来以后，我们的主体部分也应该需要修改，我们不需要将他写死，所以我们要用到具名插槽，将表格主体结构提出来，方便我们修改
操作步骤：
1. 将表格主题位置修改为<slot>插槽位置，在App.vue的MyTable组件内部写一个template [见下图1]
2. 将表格主体位置的数据，粘贴过来到template中来使用作用域插槽
3. 给当前的插槽 添加属性的方式传值，传递item 和 index 循环渲染的数据
4. App.vue使用接受数据并使用渲染数据到页面
5. 将我们刚刚写好的MyTag页面，将传递的数据修改为item.tag数据