小程序组件化

创建组件

• 在项目内创建components文件夹
• 在components文件夹下创建tabs和list文件夹
• 右键tabs文件夹，新建Component自动生成相关文件

使用组件

• 找到需要使用的页面的.JSON文件
• 在usingComponents选项下注册组件
  • key为当前组件在该页面中的标签名
  • value为组件的代码路径

      {
       "usingComponents": {
            "tabs":"/miniprogram/components/tabs",
            "list":"/miniprogram/components/list" }}
  

• 在页面的wxml文件中，以注册的key为标签名，使用组件

组件的创建（js下，ts模式下存在不识别的问题）

组件中的方法都必须定义在methods中，方法的调用都必须在lifetimes中的attached中

组件间传递参数

• 父子组件

  • 父组件向子组件传参

    //子组件：通过properties声明要从父组件中接收的数据
    properties：{
        tabId:String
    }
    //父组件：通过自定义数据的形式传递参数,以子组件中定义的key为属性名，以要传递的数据为属性值
    <list tabId=”{{tabSelectId}}>
    

  • 子组件向父组件传参

    //子组件：通过triggerEvent方法发送一个通知,通知父组件接收数据
    //方法的第一个参数:通知名
    //方法的第二个参数：要传递的数据
    this.triggerEvent('change',{
    id
    })
    //父组件：通过bind监听子组件中发送的通知
    //bind 后的内容为子组件发送的通知名，表达式为接收到该通知时触发的方法
    <tabs bind:change="onTabChange"></tabs>
    //方法被出发后可以通过e.detail的形式获取子组件传递过来的数据对象
    onTabChange(e){
        const {id} = e.detail;
        this.setData({
            tabSelectId:id
        })
    }
    

  • dsa

• 兄弟组件，必须通过中间人传递

  • 由一个子组件先把值传递给父组件，父组件再将这个值传递给另一个子组件

插槽

• 单一插槽
  • 在组件中使用solt组件定义插槽，表示占据了这一块空间，等待父组件填充

  子组件
  <!--单一插槽-->
  <slot></slot>
  <scroll-view scroll-y>
  <view wx:for="{{listData}}" wx:key="index"class="list-item">
  {{item.title}}
  </view>
  </scroll-view>
  //父组件
   <tabs bind:change="onTabChange"></tabs>
  <list tabId="{{tabSelectId}}">
  <view> 这是定义的单一插槽</view>
  </list>
  </view>
  

• 多个插槽
  • 小程序中默认只能定义一个插槽，如果要定义多个插槽需要：在组件中指定options选项的multipleSlots为true，然后通过slot的那么属性为插槽命名

的撒