This is the first day of my participation in Gwen Challenge

Custom Components

Custom component applets like vue or React allow you to build pages using custom components.

Create a custom component

Similar to the page, a custom component consists of JSON, WXML, WXSS, JS 4 files. The file structure of the component can be quickly created in the wechat developer tool

In the components/myHeader folder, create a component named myHeader

1. Declare components

You first need to customize the component declaration myHeader.json in the component’s JSON file

{
  "component": true
}
Copy the code

2. Edit components

At the same time, write the component template in the WXML file of the component and add the component style slot to the WXSS file, similar to slot myHeader.wxml in vUE

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

Write styles in component WXSS files == Note == : ID selectors, attribute selectors, and tag name selectors should not be used in component WXSS. myHeader.wxss

/* The style here applies only to the custom component */
.inner {
  color: red; 
  }
Copy the code

3. Register components

In the Component’s JS file, you use Component() to register the Component and provide the Component’s property definitions, internal data, and custom method myheader.js

Component({
  properties: {
    // Here we define the innerText property, whose value can be specified when the component uses it
    innerText: {
      // The desired data type is string
      type: String.value: 'default value',}},data: {
    // Here is some internal component data
    someData: {}},methods: {
    // Here is a custom method
    customMethod: function(){}}})Copy the code

Declare the introduction of custom components

The first step is to declare a reference in the JSON file of the page. Also provide the corresponding component name and the component path index.wxml

{/ / reference statement "usingComponents" : {/ / to use / / the name of the component of the path of the component "my - the header" : "/ components/myHeader/myHeader"}}Copy the code

Use custom components in pages

<view> <! This is a reference to a custom component --> <my-header inner-text="Some text"</my-header> </view>Copy the code

Other attributes

Define sections and sample methods

The Component constructor can be used to define components, specifying their properties, data, methods, and so on when called.

Definition section type If required describe
properties Object Map no The external properties of a component are a mapping table of property names to property Settings, as shown below
data Object no The component’s internal data, along with properties, is used to template the component
observers Object no Component data field listener, which listens for changes to properties and data, seeData listener
methods Object no Component methods, including event response functions and arbitrary custom methods, for use of event response functions, seeComponent events
created Function no Component lifecycle functions that are executed when the component instance has just been created. Note that setData cannot be called at this time, seeComponent life cycle
attached Function no Component lifecycle function, executed when the component instance enters the page node tree, seeComponent life cycle
ready Function no Component lifecycle functions, executed after the component layout is complete, seeComponent life cycle
moved Function no Component lifecycle function, executed when the component instance is moved to another location in the node tree, seeComponent life cycle
detached Function no Component lifecycle function that executes when a component instance is removed from the page node tree, seeComponent life cycle

Component – Custom component parameter transfer

  • The parent component passes parameters to the child component as properties
  • The child component passes parameters to the parent through events

process

  1. The parent component passes data {{tabs}} to the tabItems property of the child component
  2. The parent component listens for the onMyTab event
  3. The child component fires the MyTap event in bindMyTap. (To trigger a custom component event, use the triggerEvent method, specifying the event name and detail object.)
  4. Parent -> child dynamically pass this. SelectComponent (“#tabs”);

Parent component code

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab"> contents - here you can put slots </tabs>// page.js
  data: {
    tabs:[
     {name:"Experience problems"},
     {name:"Complaint of goods and merchants"}
   ]
 },
  onMyTab(e){
    console.log(e.detail);
 },
Copy the code

Subcomponent code

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>
// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
   }
 },
  /** * The initial data of the component */
  data: {
 },
  /** * list of component methods */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap'.'haha'); }}})Copy the code

summary

1. Label name is underlined.

2. The way of attributes should also be underlined

3. In other cases, use the hump name

(1). The file name of the component is as followsmyHeader.jsThe etc.

(2). The name of the property to be received in the component is as followsinnerText

4. More..

Related content:

  • Wechat small program from entry to ground tutorial (01)
  • The template syntax of wechat Applets (02)
  • Wechat small program from entry to ground tutorial (03)
  • Common Components for getting started with wechat Applets (04)
  • Wechat Applets for starting custom Components (05)

More related articles and my contact information I put here: gitee.com/haiyongcsdn…

And finally, don’t forget ❤ or 📑