小程序基礎知識

自定義組件 Demo:

• 單插槽
• 多插槽
• 數據傳遞 父=》子
• 數據傳遞 子=》父

單插槽

子組件代碼設置

//js文件
Component({
  properties: {
    innerText: {
      type: String,
      value: 'hello world'
    }
  },
  data: {
  },
  methods: {
  }
})
複製代碼

//json文件
{
  "component": true
}
複製代碼

wxml文件
<view class="inner">
  {{innerText}}
</view>
<slot></slot>
複製代碼

父組件代碼設置

//json文件
{
  "usingComponents": {
    "component": "/pages/learnComponent/component"
  }
}
複製代碼

//wxml文件
<view>
<component>
<view class="inner">
  {{innerText}}
</view>
<slot></slot>
  <text>這是文字</text>
</component>
</view>
複製代碼

多插槽

組件默認只能有一個<slot>，若是須要添加多個插槽，首先須要在組件js中聲明

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啓用多slot支持
  }
})
複製代碼

而後須要給 命名，以 name 來區分各個插槽

並在引用組件的時候，給節點指定對應的 <slot>

數據傳遞 父=》子

//子
  Component({
      properties: {
        innerText: {
          type: String,
          value: '你好嗎'
        }
      }
  })
  
  //父
  <component innerText='我很差'></component>
複製代碼

父調用子組件的方法

showPickerDate(e) {
  this.setData({ showPicker: true })
  // 調用子組件中methods的onshow方法
  this.selectComponent('#picker-date').onshow()
},
複製代碼

子傳父

methods: {
    onshow() {
        console.log(this.data.defaultValue)
    },
    // 傳遞給父組件
    cancelBut: function ( ) {
  
      var myEventDetail = { pickerShow: false, type: 'cancel' } // detail對象，提供給事件監聽函數
      this.triggerEvent('myevent', myEventDetail) //myevent自定義名稱事件，父組件中使用
    }
複製代碼

生命週期

事件

• bindtap
  bind事件綁定不會阻止冒泡事件向上冒泡

  冒泡應用：不一樣的對象同時捕獲同一事件，並調用本身的專屬處理程序作本身的事情，就像老闆一下命令，各自員工作本身崗位上的工做去了（事件代理）

• catchtap
  catch事件綁定能夠阻止冒泡事件向上冒泡

UI框架