Wechat applet_ 19. Custom components -behaviors

What is? behaviors:

behaviors It's in the applet , Features for code sharing between components , Be similar to vue Of mixins

behaviors How it works

Every behaviors Can contain a set of properties , data , Life cycle functions and methods , When a component references it , Its properties , Data and methods are merged into components

Each component can reference more than one behavior,behavior You can also quote other behavior

establish behavior:

call behavior(Object object) Method is a shared behavior Instance object , For all components :
Create the corresponding folder and js file :

module.exports = Behavior({
    
  //  Private data node 
  data: {
    },
  //  Attribute node 
  properties: {
    },
  //  Event handler function and custom method node 
  methods: {
    }
})

Import and use behaviors:

In components , Use require() Method to import the required behavior, Once mounted, you can access behavior Data or methods in , The sample code is as follows :

// components/myTest1/myTest1.js
const myBehavior = require('../../behaviors/myBehavior1')

Component({
    
  behaviors: [myBehavior],
})

behaviors When mounting , What is passed in is an array

Use ：

For example, here in behavior A is defined in data:

module.exports = Behavior({
    
  //  Private data node 
  data: {
    
    username: 'zs'
  },
  //  Attribute node 
  properties: {
    },
  //  Event handler function and custom method node 
  methods: {
    }
})

The behavior Of components of wxml Can be used directly in :

<text>
  behaviors Shared data :{
   {username}}
</text>

behavior All available nodes in :

The most commonly used of these are :properties,data,methods,behaviors

behaviors Overwrite and combination rules of fields with the same name in :

Component and what it references behavior Fields with the same name can be included in , At this point, you can refer to the following 3 A processing rule with the same name :

1. A data field with the same name (data)
2. Property with the same name (properties) Or method (methods)
3. Life cycle function with the same name

About detailed coverage and composition rules , Check the official wechat documents

For example, in the component data A node defines a username by ls, stay behavior Of data There is also a definition of username by ls, At this time, it will give priority to the data