Vue2五、商品分类：My-Tag表头组件，My-Table整个组件

准备：

安包 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

javascript"><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里的文字

javascript">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')

javascript"><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