微信小程序自定义组件-基础知识

太过爱你忘了你带给我的痛 2022-09-16 14:14 159阅读 0赞

[官方教程][Link 1]

#### 组件模板 ####

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。  
在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。

<view class="wrapper">
      <view>这里是组件的内部节点</view>
      <slot></slot>
    </view>

<view>
      <component-tag-name>
        
        <view>这里是插入到组件slot中的内容</view>
      </component-tag-name>
    </view>

#### 组件 wxml 的 slot ####

在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。  
默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。

Component({ 
      options: { 
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      properties: {  /* ... */ },
      methods: {  /* ... */ }
    })

此时，可以在这个组件的 wxml 中使用多个 slot ，以不同的 ==name ==来区分。

<view class="wrapper">
      <slot name="before"></slot>
      <view>这里是组件的内部细节</view>
      <slot name="after"></slot>
    </view>

使用时，用 slot 属性来将节点插入到不同的 slot 上。

<view>
      <component-tag-name>
        
        <view slot="before">这里是插入到组件slot name="before"中的内容</view>
        
        <view slot="after">这里是插入到组件slot name="after"中的内容</view>
      </component-tag-name>
    </view>

#### 组件传递点击事件 ####

<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({ 
      properties: { },
      methods: { 
        onTap: function(){ 
          var myEventDetail = { } // detail对象，提供给事件监听函数
          var myEventOption = { } // 触发事件的选项
          this.triggerEvent('myevent', myEventDetail, myEventOption)
        }
      }
    })

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN56eD5aS055qE5bCP5p2O5ZCM5a2m_size_18_color_FFFFFF_t_70_g_se_x_16]代码示例

// 页面 page.wxml
    <another-component bindcustomevent="pageEventListener1">
      <my-component bindcustomevent="pageEventListener2"></my-component>
    </another-component>

// 组件 another-component.wxml
    <view bindcustomevent="anotherEventListener">
      <slot />
    </view>

// 组件 my-component.wxml
    <view bindcustomevent="myEventListener">
      <slot />
    </view>

// 组件 my-component.js
    Component({ 
      methods: { 
        onTap: function(){ 
          this.triggerEvent('customevent', { }) // 只会触发 pageEventListener2
          this.triggerEvent('customevent', { }, {  bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1
          this.triggerEvent('customevent', { }, {  bubbles: true, composed: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1
        }
      }
    })

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN56eD5aS055qE5bCP5p2O5ZCM5a2m_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e8ebfc3501bb46ffaba8eb3e347e983f.png