小程序基础知识

自定义组件 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框架