中山响应式网站微信小程序设计团队
准备：
安包 npm less less-loader。拆分：一共分成两个组件部分：
1：My-Tag 标签一个组件。2：My-Table 整体一个组件（表头不固定，内容不固定（插槽））
一，My-Tag 分类标签的功能：
tip：拆分时style要加：<style lang="less" scoped> </style>
在APP.vue中：导入、注册、使用组件
功能：
1 : input修改数据 和 文字互斥
用 布尔数据 isShow:false、input加v-if 、div加v-else
<template><div class="my-tag"><inputclass="input"type="text"placeholder="输入标签"v-if="isShow"/><div class="text" v-else>茶具</div></div>
</template>
<script>
// My-Tag 分类标签的功能：
// 1 : input修改数据 和 文字互斥 用 布尔数据 v-if v-else
// 2 : 双击文字 div显示input标签→自动获得焦点
// 3 : input要数据回显
// 4 : 用户输入后，回车→把新的内容渲染到页面→数据应该同步
export default {
data(){return{isShow:false}
},
}
</script>2 :双击显示input+自动获焦和失焦
双击文字 div显示input标签输入框＋input输入框自动获得焦点，
光标在输入框中失去焦点时：输入框变成div里的文字
dbl=double
1 div（茶具）添加@dblclick双击 修改isShow:为true
2 main写全局自定义命令，获焦指令，在input身上直接用v-focus
3 input添加 @blur失焦 isShow：修改为true，输入框变成div里的文字
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//自定义命令---获得焦点-----全局-----在main.js
Vue.directive('focus', {inserted(el) {el.focus()}})// ---------------------------------
new Vue({render: h => h(App),
}).$mount('#app')<template><div class="my-tag"><inputclass="input"type="text"placeholder="输入标签"v-if="isShow"v-focus@blur="isShow=false"/><!--dbl=double 双击-------><div class="text" v-else @dblclick="dblfn" >茶具</div></div>
</template>
<script>
// My-Tag 分类标签的功能：
// 1 : input修改数据 和 文字互斥 用 布尔数据 v-if v-else
// 2 : 双击文字 div显示input标签→自动获得焦点
// 3 : input要数据回显
// 4 : 用户输入后，回车→把新的内容渲染到页面→数据应该同步
export default {
data(){return{isShow:false}},
methods:{dblfn(){this.isShow=true}
}
}
</script>3 : input要数据回显
父传子- 子组件用父组件的数据。父子通信比较繁琐，
所以用v-model双向绑定 化简（V-model=value属性和input事件的缩写）
1 ：父APP.vue：假设一个txt="哈哈哈" 字符串数据，
2 ：My-Tag挖坑：props:{ value:String },
3：父APP.vue： 使用v-model <MyTag v-model="txt"></MyTag>
4：input添加:value="value"
5 : div里文字用差值表达式代替{{value}}
4 : 用户输入后回车,新内容渲染到页面
用户输入后，回车→把新的内容渲染到页面→数据应该同步
1：在input里添加回车事件 @keyup.enter="enterfn"
2 ：写函数enterfn：通知父组件保存用户输入的数据$emit（事件名，用户输入的数据）-语法糖
用户输入的值——借助事件对象获取value的值e.target.value
3 ：显示div 隐藏输入框 this.isShow=false
二、My-Table 整体一个组件
1：拆组件
把APP.vue的my-table的结构和css样式剪切到My-Table（拆成组件，好处就是能调用多次）
（tip：拆分时My-Table的style要加：<style lang="less" scoped> </style>）
然后把My-Table在根组件APP.vue导入、注册、使用
tip：把My-Tag的导入注册和使用全部注释（不然会报错，My-Tag被发现但未使用）
2：父传子拿数据(for循环渲染数据)
1 ：My-Table挖坑 使用父组件的数据
2：父组件传数据
3：子组件v-for循环替换数据
3：插槽
拆成组件，能调用多次，但因为调用多次，不可能每次调用的表格都一模一样（结构不固定），
所以用插槽（表头和内容分别用插槽）允许根据需要定制
1: My-Table表头和内容slot插槽，
2 : name命名——表头：name="head"，内容：name="con" 在APP.vue表头和内容接收一下数据
3：内容的插槽——用作用域插槽
把My-Table作用域的v-for的值（:item="item" :index="index"）扔到APP.vue使用
4 : 放开MyTag注释更换MyTag使用时绑定的值
1：把分类标签的My-Tag的引入、注册、使用、的注释放开，
2: 把使用MyTag 组件绑定的v-model的值更换成item.tag
<MyTag v-model="item.tag"></MyTag>
