WeChat mini program componentization

Parent-child component communication

Also mentioned in WeChat

1. Parent component passes value to child component

Define properties in child components

properties: { // Complex definition name:{ type: String, value:'Zhang Sanfeng' }, // Simple definition name2:String},

When the parent component refers to the child component, it passes the value to the child component by setting properties.

2. Subcomponent passes value to parent component

Bind a custom event in the component

// Referenced a custom component, bound myevent event, this event corresponds to the parentEvent method <test-button name="Zhang Wuji" bindmyevent="parentEvent"></test-button>

Triggering this event in the child component can pass values ​​to the parent component.

Trigger events through triggerEvent in child components

 methods: { Method name: function(){ var myEventDetail = {} // detail object, provided to the event listening function var myEventOption = {} // Options for triggering events this.triggerEvent('myevent', myEventDetail, myEventOption) } }

2.Behaviors

Register a behavior and accept a parameter of type Object

module.exports = Behavior({

  behaviors: [],

  properties: {

    myBehaviorProperty: {

      type: String

    }

  },

  data: {

    myBehaviorData: {}

  },

  attached: function(){},

  methods: {

    myBehaviorMethod: function(){}

  }})

When used, use  slot attributes to insert nodes into different slots.

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

Component style isolation

By default, the style of a custom component is only affected by the custom component wxss. Unless the following two situations occur:

• app.wxsswxss Or the tag name selector (or some other special selector) is used in the  page  to directly specify the style. These selectors will affect the page and all components. This is generally not recommended.
• Specify special style isolation options  styleIsolation .

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

Preview the effect in developer tools

styleIsolation Options are supported starting with base library version  2.6.5  . It supports the following values:

• isolated Indicates that style isolation is enabled. Within and outside the custom component, the styles specified using class will not affect each other (the default value in general);
• apply-shared Indicates that the wxss style of the page will affect the custom component, but the style specified in the custom component wxss will not affect the page;
• shared Indicates that the page wxss style will affect the custom component, and the style specified in the custom component wxss will also affect the page and other   custom components that are set apply-shared or  . shared(This option is not available in the plugin.)

• Define life cycle methods

• Component({
    lifetimes: {
      attached: function() {
        // 在组件实例进入页面节点树时执行
      },
      detached: function() {
        // 在组件实例被从页面节点树移除时执行
      },
    },

The life cycle of the page where the component is located

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})