Vue学习：20.综合案例-商品列表

学而时用之，方能融会贯通！

实例：商品列表

实现功能

要求表格组件支持动态数据渲染、自定义表头和主体。标签组件需要双击显示输入框并获得焦点，可以编辑标签信息。

思路

首先是表格组件，动态渲染需要使用组件通信-“父传子”；允许自定义可以使用具名插槽；而对于标签组件，可以使用v-if/else和自定义指令v-focus来实现双击显示输入框并自动聚焦，可以使用v-model实现回显标签信息，最后使用“子传父”修改标签信息。

代码

根组件（APP.vue）

<template>
    <MyTable :list="list">
      <template #head>
        <th>编号</th>
        <th>图片</th>
        <th>名称</th>
        <th>标签</th>
      </template>
      <!-- 插槽作用域 -->
      <template #body="{ item, index}">
        <td style="width: 100px;">{{ index+1 }}</td>
        <td style="width: 200px;">
          <img :src="item.photo">
        </td>
        <td style="width: 300px;">{{ item.name }}</td>
        <td>
            <MyTage v-model="item.tage"></MyTage>
        </td>
      </template>
    </MyTable>
</template>
<script>
import MyTage from './components/MyTage.vue'
import MyTable from './components/MyTable.vue';

export default {
  data(){
    return{
      list:[
        {id:101, photo:'https://img.zcool.cn/community/01811f5abc92fda801218207a45ce8.JPG@1280w_1l_2o_100sh.jpg', name:'缴费部分', tage: '红酒'},
        {id:102, photo:'https://img.zcool.cn/community/01811f5abc92fda801218207a45ce8.JPG@1280w_1l_2o_100sh.jpg', name:'缴费部分', tage: '红酒'},
        {id:103, photo:'https://img.zcool.cn/community/01811f5abc92fda801218207a45ce8.JPG@1280w_1l_2o_100sh.jpg', name:'缴费部分', tage: '红酒'}
      ]
    }
  },
  components:{
    MyTage,
    MyTable
  }
}
</script>

<style>

</style>

MyTable组件

<template>
  <div>
    <table>
        <thead>
            <tr>
                <slot name="head"></slot>
            </tr>
        </thead>

        <tbody>
            <tr v-for="(item, index) in  list" :key="item.id">
                <!-- 插槽作用域-以加属性名的方式传参 -->
                <slot name="body" :item="item" :index="index"></slot>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
export default {
    props:{
        list:Array
    },
}
</script>

<style scoped>
    table{
        margin: 20px auto;
        border-collapse: collapse;
        text-align: center;
    }
    th,td{
        width: 100px;
        height: 50px;
        line-height: 50px;
        border: 2px solid rgb(163, 161, 161);
    }
    th{
        background-color: blue;
        color: #fff;
    }
    img{
        width: 100px;
        height: 100px;
    }
</style>

MyTag组件

<template>
    <div>
        <input
         v-if="isEdit"
         v-focus
         :value="value"
         @blur="isEdit = false"
         @keyup.enter="handleEnter"
         placeholder="请输入标签">
         <!-- 定义双击事件 -->
        <p v-else @dblclick="handleEdit">{{value}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isEdit: false
        }
    },
    methods:{
        handleEdit(){
            this.isEdit = true
        },
        handleEnter(e){
            this.$emit('input',e.target.value)
            this.isEdit = false
        }
    },
    props:{
        value:String
    }
}
</script>

<style>
    input,p{
        width: 100px;
    }
</style>

注意：这个实例中数据来回传递，咋一看好像有点晕，但是当你真正理解了，才会惊叹“牛逼！”

效果图