tencent cloud

{
  "component": true
}

<!-- This is the internal WXML structure of the custom component -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

/*  This style only applies to this custom component  */
.inner {
  color: red;
}

Component({
  properties: {
    // The innerText property is defined here, and the property value can be specified when the component is used.
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // Here are some component internal data
    someData: {}
  },
  methods: {
    // Here is a custom method
    customMethod: function(){}
  }
})

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

<view>
  <!-- The following is a reference to a custom component -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

<!-- Component template -->
<view class="wrapper">
  <view>This indicates the internal node of the component</view>
  <slot></slot>
</view>

<!--Page template where the component is referenced-->
<view>
  <component-tag-name>
    <!-- This part is added to the location of the  <slot>  component -->
    <view>This is inserted in the slot component</view>
  </component-tag-name>
</view>

<!--Page template where the component is referenced-->
<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
    <!-- This part is added to the location of the  <slot>  component -->
    <view>This is inserted in the slot component</view>
  </component-tag-name>
</view>

Component({
  options: {
    multipleSlots: true // Enable multiple slots in the options of component definition.
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

<!-- Component template -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>This indicates the internal details of the component</view>
  <slot name="after"></slot>
</view>

<!--Page template where the component is referenced-->
<view>
  <component-tag-name>
    <!-- This part is added to the location of the  <slot name="before">  component -->
    <view slot="before">This is inserted in the slot name="before" component</view>
    <!-- This part is added to the location of the  <slot name="after">  component -->
    <view slot="after">This is inserted in the slot name="after" component</view>
  </component-tag-name>
</view>

#a { } /* Cannot be used in components */
[a] { } /* Cannot be used in components */
button { } /* Cannot be used in components */
.a > .b { } /* Invalid unless  .a  is  view  component node */

/* Component custom-component.wxss */
:host {
  color: yellow;
}

<!-- page's WXML -->
<custom-component>The text here is highlighted in yellow</custom-component>

/* Component custom-component.js */
Component({
  externalClasses: ['my-class']
})

<!-- Component  custom-component.wxml -->
<custom-component class="my-class">The colour of this text is determined by the class outside the component.</custom-component>

<!-- page's WXML -->
<custom-component my-class="red-text" />
<custom-component my-class="large-text" />

.red-text {
  color: red;
}
.large-text {
  font-size: 1.5em;
}

/* Component  custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  }
}

<!-- Component  custom-component.wxml -->
<text class="red-text">
  The colour of this text is determined by the style definitions in `app.wxss` and the page `wxss
</text>

/* app.wxss */
.red-text {
  color: red;
}

Component({

  behaviors: [],

  properties: {
    myProperty: { // Property name
      type: String,
      value: ''
    },
    myProperty2: String // Simplified definition
  },
  
  data: {}, // Private data, used for template rendering

  lifetimes: {
    // Lifecycle function, which can be a function or a method name defined in the methods field
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // Lifecycle function, which can be a function or a method name defined in the methods field
  attached: function () { }, // The declaration in the attached field is overwritten by that in the lifetimes field
  ready: function() { },

  pageLifetimes: {
    // Component page lifecycle function
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // The properties and data are updated in the same way as with the page data
      })
    },
    // The internal method starts with an underscore
    _myPrivateMethod: function(){
      // Here, data.A[0].B is set to 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

{
  "usingComponents": {}
}

Component({
  properties: {
    paramA: Number,
    paramB: String,
  },

  methods: {
    onLoad: function() {
      this.data.paramA // Value of page parameter paramA
      this.data.paramB // Value of page parameter paramB
    }
  }
})

// page-common-behavior.js
module.exports = Behavior({
  attached: function() {
    // On page creation
    console.info('Page loaded!')
  },
  detached: function() {
    // When the page is destroyed
    console.info('Page unloaded!')
  }
})

// page A
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})

// page B
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})

<!-- The "onMyEvent" method is called when the custom component triggers "myevent" -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- Or write it like this -->
<component-tag-name bind:myevent="onMyEvent" />

Page({
  onMyEvent: function(e){
    e.detail // The detail object provided when the custom component triggers an event
  }
})

<!-- In the custom component -->
<button bindtap="onTap">Click this button to trigger the "myevent" event</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail object, provided to the event monitoring function
      var myEventOption = {} // Event triggering options
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

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

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

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

// Component  my-component.js
Component({
  methods: {
    onTap: function(){
      this.triggerEvent('customevent', {}) // Only pageEventListener2 is triggered
      this.triggerEvent('customevent', {}, { bubbles: true }) // pageEventListener2 and pageEventListener1 are triggered in sequence
      this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // pageEventListener2, anotherEventListener, and pageEventListener1 are triggered in sequence
    }
  }
})

// parent component
Page({
  data: {},
  getChildComponent: function () {
    const child = this.selectComponent('.my-component');
    console.log(child)
  }
})

// Custom Components my-component Internal
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})

<! -- When using custom components -->
<my-component id="the-id" />

// Called by the parent component
const child = this.selectComponent('#the-id') // be tantamount to { myField: 'myValue' }

Component({
  lifetimes: {
    attached: function() {
      // Executed when the component instance enters the page node tree
    },
    detached: function() {
      // Executed when the component instance is removed from the page node tree
    },
  },
  // The older definition methods below can be used for compatibility with base library versions under 2.2.3
  attached: function() {
    // Executed when the component instance enters the page node tree
  },
  detached: function() {
    // Executed when the component instance is removed from the page node tree
  },
  // ...
})