微信小程序中公共组件的使用

小程序公共组件创建，导入及使用

1. 使用页面

    <van-tabs active="{{ active }}" bind:change="onChange" title-inactive-color="#c5c8ce">
      <van-tab title="线上课程" >
         1.<onLine show="show" onLineList="{{onLineList}}"   studentId="{{studentId}}" projectLevelId="{{projectLevelId}}"  studyTime="{{studyTime}}" viewHeight="{{viewHeight}}" ></onLine>
      </van-tab>
      <van-tab title="线下课程">
      2. <offline OfflineList="{{OfflineList}}"  studentId="{{studentId}}" projectLevelId="{{projectLevelId}}"   viewHeight="{{viewHeight}}"></offline>
      </van-tab>
      <van-tab title="模拟考试" name="exam">
       3. <simulation studentId="{{studentId}}" projectLevelId="{{projectLevelId}}"  viewHeight="{{viewHeight}}"></simulation>
      </van-tab>
    </van-tabs>

2.app.json中引入

{
  "usingComponents": {

    "onLine": "../tabs/onLine/onLine",
    "offline": "../tabs/offline/offline",
    "simulation": "../tabs/simulation/simulation"

  },
  "navigationStyle": "custom"
}

2.新建页面时右键点击选择component
3.公共文件模板

// 就像vue中的props一样，将传入的值在properties中定义
  properties: {
    projectLevelId:{
      type:String,
      value: "",
      // observers  属性的监听器，可以监听全部 setData    相当于watch监听事件
      observer: function (newVal) {
      this.getSimulation()

       this.setData({
         id:newVal
       })
      }
    },
    }，

4.如何修改或使用

 // observers  属性的监听器，可以监听全部 setData    相当于watch监听事件
      observer: function (newVal) {
      this.getSimulation()

       this.setData({
         id:newVal
       })
      }

5.事件使用

在methods:中定义