小程序组件components

偏执的太偏执、 2022-05-20 00:48 375阅读 0赞

模板html

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

模板json

{
      "component": true,
      "usingComponents": {} }

模板css

/* components/component-tag-name.wxss 组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点： 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。 继承样式，如 font 、 color ，会从组件外继承到组件内。 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。 组件可以指定它所在节点的默认样式，使用 :host 选择器 */
    #a { } /* 在组件中不能使用 */
    [a] { } /* 在组件中不能使用 */
    button { } /* 在组件中不能使用 */
    .a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */
    
    :host{ color:blueviolet; }

模板js

// components/component-tag-name.js
    Component({
      // externalClasses: ['my-class'], ///组件希望接受外部传入的样式类
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持(一般只支持一个)多个slot，以不同的 name 来区分。
      },
      /** * 组件的属性列表 */
      properties: {
    
      },
    
      /** * 组件的初始数据 */
      data: {
    
      },
    
      /** * 组件的方法列表 */
      methods: {
        sayHello(e){
          console.log(e,'hello')
        }
      }
    })

引入页json文件

{
      "usingComponents": { "my-component": "/components/component-tag-name" } }

引入页html

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

[Component构造器https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html][Component_https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_component.html]

### 数据传入components ###

组件html

> 注意：在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name=”attr value”），应用于数据绑定时采用驼峰写法（attr=”\{ \{propertyName\}\}”）。

Component({
    
      behaviors: [],
    
      properties: {
        myProperty: { // 属性名
          type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
          value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
          observer: function (newVal, oldVal) { 
            // console.log(oldVal)
            // console.log(newVal)
             } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        },
        myProperty2: String // 简化的定义方式
      },
      data: {
        A: [{
          B: 'init data.A[0].B'
        }]
      }, // 私有数据，可用于模版渲染
    
      // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
      attached: function () {  },
      moved: function () {  },
      detached: function () {  },
    
      methods: {
        onMyButtonTap: function () { 
          this.setData({
            // 更新属性和数据的方法与更新页面数据的方法类似
            myProperty: 'Test'
          })
        },
        _myPrivateMethod: function () { 
          // 内部方法建议以下划线开头
          this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
          this.applyDataUpdates()
        },
        _propertyChange: function (newVal, oldVal) { 
    
        }
      }
    
    })

引入页html

<my-component my-property="{ { msg}}" />

### triggerEvent 使用 ###

组件js

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

引用页js

const app = getApp()
    
    Page({
      data: {
    
      },
      myEventListener: function(e) { 
        console.log(e.detail) 
      }
    })

触发事件的选项包括：

<table> 
 <thead> 
  <tr> 
   <th>选项名</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>bubbles</td> 
   <td>Boolean</td> 
   <td>否</td> 
   <td>false</td> 
   <td>事件是否冒泡</td> 
  </tr> 
  <tr> 
   <td>composed</td> 
   <td>Boolean</td> 
   <td>否</td> 
   <td>false</td> 
   <td>事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部</td> 
  </tr> 
  <tr> 
   <td>capturePhase</td> 
   <td>Boolean</td> 
   <td>否</td> 
   <td>false</td> 
   <td>事件是否拥有捕获阶段</td> 
  </tr> 
 </tbody> 
</table>

事件案例[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html][https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_events.html]

behaviors行为[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html][https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_behaviors.html]

> 字段的覆盖和组合规则  
> 组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：  
> 如果有同名的属性或方法，组件本身的属性或方法会覆盖 behavior 中的属性或方法，如果引用了多个 behavior ，在定义段中靠后 behavior 中的属性或方法会覆盖靠前的属性或方法；  
> 如果有同名的数据字段，如果数据是对象类型，会进行对象合并，如果是非对象类型则会进行相互覆盖；  
> 生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。

[Component_https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_component.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_events.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_behaviors.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html