小程序《旧岛》项目笔记（5）-类的继承、组件属性赋值与页面渲染流程解析

古城微笑少年丶 2021-09-16 06:10 170阅读 0赞

## 类的继承与组件属性赋值 ##

### 类的继承 ###

在项目中，我们声明了一个类A，但是往往在声明另一个类B的时候，发现，类B需要继承类A的属性，这就要用到类的继承。

import { Http } from '../utils/Http.js';
    class ClassicModel extends Http {
        getLatest(sCallBack) {
            this.request({
                url: '/classic/latest',
                success: (res) => {
                    sCallBack(res);
                }
            });
        }
    }
    export { ClassicModel }

上面的代码中，实现了  ClassicModel  这个类继承了  Http  这个类。

注意事项：在进行类的继承时，我们首先要在子类中引入父类，并在声明子类的时候，使用关键字  ***extends***  实现继承。

// pages/classic/classic.js
    // 引入ClassicModel类，并实例化一个对象
    import {
      ClassicModel
    } from '../../models/Classic.js';
    let classic = new ClassicModel();
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        test: 1
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        classic.getLatest((res) => {
          console.log('11111111111', res);
          this.setData({
            classicData: res
          })
        });
    
      }
    })

### 组件属性赋值 ###

在组件  like  中，生命了  like  与  count  两个属性，在父组件  classic  的中数据传递到子组件  like 中，使用以下代码传递：

<v-like like='{
       {classicData.like_status}}' count='{
       {classicData.fav_nums}}'></v-like>

### 页面渲染流程解析 ###

**（1）数据显示在父组件classic中**

***API***  =>  ***Classic JS***  ---setData--  ***Classic wxml***

**（2）数据显示在子组件like中**

***API***  =>  ***Classic JS***  ---setData--  ***Classic wxml***  =>  ***Like Property***  --setData--  =>  ***Like wxml***