The custom component of the applet

How to get component

• Using the widget developer tool, right-click to create the Component option and you get the Four Component components

  • 

All arguments to component

// Unlike vue components, applets are introduced in JSON files
// index.json
{
  "navigationBarTitleText": "Importing component pages"."usingComponents": {
    "componts-tag-name":".. /.. /componets/navbar/navbar"}}// Use the imported component
// index.wxml
<view class="container log-list">
  <componts-tag-name name="{{logsData}}"></componts-tag-name>
</view>
Copy the code

• properties
  • External properties of a component
  • Similar to props in Vue

  <! Properties -->Component({/** * Component property list */ properties: {name:{type:'string', optionalTypes:[], // Multiple data types value:'', // Default value observer:function(){// Trigger when the current data changes // trigger when the first data is passed}}}})<! Page -- -- -- >
  <view class="container log-list">
    <componts-tag-name name="{{logsData}}"></componts-tag-name>
  </view>
  Copy the code

• data
  • Data inside the component
• observers
  • Listen for changes in component data fields
  • The first incoming data is also triggered
  • Listen for changes to all properties

  // use a wildcard to listen for all attributes
  observers: { // Listen for setData operations on all properties of an object
      'some.field.**': function(field) {
        // Triggered when setData is used to set this.data.some.field itself or any of its subdata fields
        // (this.data.some is also triggered by setData)
        field === this.data.some.field
      },
    },
    observers: { // Listen for all setData operations
      '**': function() {
        // setData fires every time
      },
    },
    observers: {// Arrays can also be used
      'arr[12]': function(arr12) {
        // triggered when setData is set to this.data.arr[12]
        // (this.data.arr can also be set with setData)
        arr12 === this.data.arr[12]
      },
  }
      ~~~
  Copy the code

• methods
  • Component methods
• behaviors
  • Like mixins and traits, reuse between components
• Created (Lifecycle functions)
  • You do not need to call setData when the component instance has just been created
• Attached (Life cycle functions)
  • When the component instance enters the page node tree, you can use setData
• Ready (Lifecycle functions)
  • Execute after component layout is complete
• Moved (Lifecycle function)
  • Executed when the component instance is moved to another location in the node tree
• Detached (Life cycle function)
  • When the component instance is removed from the page node tree, w’x
• relations
  • Defining component relationships
• externalCLasses
  • Accept component external style classes
• options
  • Some options
• lefetimes
  • Component lifecycle declaration objects
• pageLifetimes
  • The life cycle of the page on which the component is located declares objects

Parent-child communication

• The father the son
  • The child component can get the passed value in properties by adding attributes to the child component instance tag
• Child the parent
  • Emit is similar to vue through the triggerEvent method
  • The parent gets the component instance by binding a custom event name to the component instance tag and getting the class or ID name of the component

      / / child componentHandleBack (){this.triggerEvent('myevent', {params: 'pass ', {})} handleBack(){this.triggerEvent('myevent', {})}/ / the parent component
      // wxml
      <view class="container log-list">
          <componts-tag-name class="componts-tag-name" name="{{logsData}}" bind:myevent="handleEvent"></componts-tag-name>
      </view>
      // js
      console.log(this.selectComponent('.componts-tag-name').data) // Get the component instance
      console.log(e.detail) // Get the transferred data
  Copy the code