Eine kurze Analyse der Verhaltensweisen in Miniprogrammen. Wie erstellt und verwendet man es?

青灯夜游
Freigeben: 2022-03-02 19:36:13
nach vorne
4936 Leute haben es durchsucht

Was sind Verhaltensweisen? Der folgende Artikel führt Sie durch die Verhaltensweisen benutzerdefinierter Komponenten in Miniprogrammen und stellt vor, wie Sie Verhaltensweisen erstellen, importieren und verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Eine kurze Analyse der Verhaltensweisen in Miniprogrammen. Wie erstellt und verwendet man es?

Was sind Verhaltensweisen? Verhaltensweisen sind Funktionen, die zum Teilen von Komponentencode in Miniprogrammen verwendet werden, ähnlich wie Mixins in Vue.js. Beispielsweise gibt es in mehreren Komponenten einen Teil des Codes, der genau gleich ist. Wir müssen ihn nicht für jede Komponente schreiben. Der Einfachheit halber können wir diesen Teil des Codes kapseln und in Verhaltensweisen zur gemeinsamen Nutzung einfügen. Wer verwendet diesen Teil des Codes? Direkter Verweis wird wirksam

Wie Verhaltensweisen funktionieren

In einem Miniprogramm kann jedes Verhalten eine Reihe von Eigenschaften, Daten, Lebenszyklen und Methoden enthalten. Wenn eine Komponente darauf verweist, werden ihre Eigenschaften, Daten und Methoden in der Komponente zusammengeführt.

    Jede Komponente kann auf mehrere Verhaltensweisen verweisen, und jedes Verhalten kann auch aufeinander verweisen
Erstellung von Verhaltensweisen

Rufen Sie die Methode behaviors(Object Object) auf, um eine gemeinsame Verhaltensinstanz zu erstellen Objekt zur Verwendung durch alle Komponenten
//使用 module.exports 将 behavior 实例对象共享出去
module.exports = Behavior({
    
    //私有数据节点
    data: { },
    
    //属性节点
    properties: { },
    
    //事件处理
    methods: {  }
})
Nach dem Login kopieren

Import und Verwendung von Verhaltensweisenbehaviors(Object Object) 方法就可以创建一个共享的 behaviors 实例对象,供所有的组件使用

//1.使用 `require()` 导入需要的自定义 behaviors 模块
const myBehaviors = require("../../behaviors/behaviors")

Component({

  //2. 将导入的 behaviors 实例对象,挂载到 behaviors数组的节点中便可以使用
  behaviors: [myBehaviors],
  
  properties: {
    //...
  }
  
  //其他代码...
})
Nach dem Login kopieren

behaviors 的导入与使用

在组件中,使用 require() 方法导入需要的 behaviors,挂载后即可访问 behaviors 中的数据或方法

rrreee

behaviors 中所有可用的节点

比较常用的有 propertiesdatamethodsbehaviors

可用的节点 类型 是否必填 描述
properties Object Map 同组件的属性
data Object 同组件的数据
methods Object 同自定义组件的方法
behaviors Sting Array 引用其它的 behaviors
created Function 生命周期函数
attached Function 生命周期函数
ready Function 生命周期函数
moved Function 生命周期函数
detached Function 生命周期函数

同名字段的覆盖和组合规则

组件和它引用的 behaviors 中可以包含同名的字段,此时可以参考以下三种同名的处理规则

  • 同名的数据字段 (data

    • 若同名的数据字段都是对象类型,会进行对象合并
    • 其余情况会进行数据覆盖,覆盖规则: 组件 > 父 behaviors > 子 behaviors 、靠后的 behaviors > 靠前的 behaviors(优先级高的覆盖优先级低的,最大的优先级最高)
  • 同名的属性(properties)或方法(methods

      Verwenden Sie in Komponenten require(). Die Methode importiert die erforderlichen Verhaltensweisen . Nach dem Mounten können Sie auf die Daten oder Methoden in den Verhaltensweisen zugreifen.
    • rrreee code>, data, methods, behaviors
    • ObjektzuordnungNein
      Verfügbarer Knoten Typen Erforderlich Beschreibung
      EigenschaftenKeine Eigenschaften derselben Komponente
      Daten Objekt Nein Daten derselben Komponente
      Methoden Objekt Nein td> Gleiche wie benutzerdefinierte Komponentenmethoden
      Verhalten Sting-Array Keine Referenz andere Verhaltensweisen
      erstellt Funktion Nein Lebenszyklusfunktion
      angehängt Funktion Nein Lebenszyklusfunktion
      bereit Funktion Nein Lebenszyklusfunktion
      verschoben Funktion td> Nein Lebenszyklusfunktion
      freistehend FunktionLebenszyklusfunktion
    • Überschreibungs- und Kombinationsregeln für Felder mit demselben Namen
    Komponenten und die Verhaltensweisen, auf die sie verweisen, können Felder mit demselben Namen enthalten. In diesem Fall können Sie auf die folgenden drei Verarbeitungsregeln mit demselben Namen verweisen: Datenfelder mit demselben Namen (data). )
  • Wenn alle Datenfelder denselben Namen haben, wird eine Objektzusammenführung durchgeführt

      In anderen Fällen werden die Daten überschrieben: Komponenten > Untergeordnete Verhaltensweisen > Vordere Verhaltensweisen (mit hoher Priorität überschreiben) Niedrige Priorität, das größte hat die höchste Priorität)
      • Eigenschaften (properties) oder Methoden (methods) mit den gleichen Namen
      • Wenn die Komponente selbst über diese Eigenschaft oder Methode verfügt, überschreiben die Eigenschaften oder Methoden der Komponente die gleichnamigen Eigenschaften oder Methoden in den Verhaltensweisen. Wenn die Komponente selbst nicht über diese Eigenschaft oder Methode verfügt, Die Eigenschaften oder Methoden der späteren Verhaltensweisen, die im Verhaltensfeld der Komponente definiert sind, überschreiben die früheren Attribute oder Methoden mit demselben Namen.
      • Basierend auf dem vorherigen Artikel lautet die Regel, wenn es verschachtelte Verweise auf Verhaltensweisen gibt: übergeordnete Verhaltensweisen überschreiben Attribute oder Methoden mit demselben Namen in untergeordneten Verhaltensweisen , befolgen Sie die folgenden Regeln: Verhalten haben Vorrang vor Komponentenausführung. Untergeordnete Verhaltensweisen haben Vorrang vor übergeordneten Verhaltensweisen. Vordere Verhaltensweisen haben Vorrang vor abhängigen Verhaltensweisen. Nachfolgende Verhaltensweisen werden ausgeführt Komponente definiert, dass die Lebenszyklusfunktion nur einmal ausgeführt wird

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verhaltensweisen in Miniprogrammen. Wie erstellt und verwendet man es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage