6.3【微信小程序全栈开发课程】记录页面（三）--记录数据组件初始化

今天药忘吃喽~ 2023-06-08 06:57 8阅读 0赞

#### 1、功能介绍 ####

在记录页面对记录数据进行展示，每条记录数据后面都有编辑按钮，点击编辑按钮，出现修改文本框，点击修改按钮后，文本框会自动收起  
![format_png][]

#### 2、创建组件 ####

在src/components文件夹下面创建一个RecordList.vue文件，用来展示一条记录

写入vue基础代码

<template>
      <div>
        记录数据组件
      </div>
    </template>
    
    <script> export default { } </script>
    
    <style lang='scss'> </style>

#### 3、在记录页面引入组件 ####

编辑record.vue文件。通过import引入组件，并添加components函数中声明RecordList组件

//参考代码，无需粘贴
    //<script>
    
    
      //需要粘贴的部分，通过import引入组件
      import RecordList from '@/components/RecordList'
    
    
      //参考代码，无需粘贴
      //export default { 
    
    
        //需要粘贴的部分，添加components对象声明组件
        components: { 
          RecordList
        },

#### 4、循环调用组件 ####

继续编辑record.vue文件的template部分

<RecordList :key='index' v-for='(record,index) in records' :record = 'record'></RecordList>

#### 5、在子组件中获取数据 ####

父组件record.vue中，用`:record = 'record'`

给子组件RecordList.vue传递数据，编辑RecordList.vue文件获取到这个数据

//参考代码，无需粘贴
    //<script>
    //export default { 
    
    
        //需要添加的部分，获取到父组件传递过来的数据
        props: ['record'],
    
    
    //参考代码，无需粘贴
    //}
    //</script>

#### 6、添加样式代码 ####

添加代码到style标签中

.book-card{ 
      background: #FFFFFF;
      margin-bottom:6px; .table { 
        border: 0px solid darkgray;
        font-size: 15px;
        height: 42px;
        line-height:42px; .tr { 
          display: flex;
          width: 100%;
        }
        .date{ 
          width: 40%;
          margin-left: 10px;
        }
        .busi{ 
          width: 10%;
          font-weight:bold;
        }
        .mark{ 
          width: 15%;
          margin-left: 20px;
          font-weight:bold;
        }
        .net{ 
          width: 16%;
          text-align:center;
          width:60px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          font-size: 14px;
          margin-left: 5px;
          line-height:42px; .no-note{ 
            text-decoration:underline;
            color:#C0C0C0;
            font-size: 13px;
          }
        }
        .image{ 
          padding-top:1px;
          float: right;
          margin-left: 5px;
        }
      }
      .hide{ 
        background: #F0F0F0;
        font-size: 15px;
        padding: 10px 10px 3px 30px; .input{ 
          width:60%;
          height:30px;
          background:#FFFFFF;
          border:1px solid black;
          border-radius: 5px;
          text-align:center;
        }
        .btn{ 
          color:white;
          background:#EA5A49;
          padding-left: 15px;
          margin-right:20px;
          border-radius: 5px;
          font-size: 13px;
          line-height: 30px;
          height: 30px;
          width: 18%;
          float:right;
        }
      }
      .img{ 
        width: 13px;
        height: 13px;
        margin-right: 5px;
      }
    }
    ::-webkit-scrollbar { 
      width: 0;
      height: 0;
      color: transparent;
    }

> **作者：猫宁一**  
> 全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 1][]

[format_png]: /images/20230531/57fe6395ca8b415b9ec0f412f8ccdd5a.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/7eb1a1b31a614f5ba4956d25239b3fc3.png