自定义组件的behaviors笔记

behaviors

作用：用于组件间代码共享

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

同名的属性 (properties) 或方法 (methods)

1）如果A存在，这A覆盖 B，C，D
2）如果A不存在，B,C,D存在，则B覆盖C跟D
3）如果A，B不存在，C跟D存在，behaviors 字段中定义靠后优先级高，例如：

behaviors: [C，D]      //显示D
behaviors: [D，C]      //显示C

同名的数据字段 (data)

生命周期函数 (data)

• 不同名
  对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
• 同名
  生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用：

对于同种生命周期函数，遵循如下规则：

（1）如果A中有behaviors: [B，C]，B中有behaviors: [D，E]，C中有behaviors: [D，E]
		执行顺序是，D>E>B>C>A  
（2）如果A中有behaviors: [B，C]，B中有behaviors: [D]，C中有behaviors: [E]
		执行顺序是，D>B>E>C>A  
（3）如果A中有behaviors: [B]，B中有behaviors: [D，E，F]
		执行顺序是，D>E>F>B>A  

*注意：
如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。上面（1）的B跟C都有嵌套着D跟E,但是B，C都是属于同一个的组件，所有D跟E只会执行一次.

内置 behaviors

wx://form-field

作用：使自定义组件有类似于表单控件的行为，使 form 组件可以识别这些自定义组件。
通俗理解：将自定义组件当成表单控件使用

eg:自定义组件custom-form-field.wxml
<input placeholder="请输入名字" value="{{value}}" bindinput="onChange" ></input>
父组件.wxml
<form bindsubmit="formSubmit">
  <custom-form-field name="custom-name"></custom-form-field>
  <button form-type="submit">提交</button>
</form>
结果：![在这里插入图片描述](https://img-blog.csdnimg.cn/20201208140508589.png)

wx://form-field-group

使 form 组件可以识别到这个自定义组件内部的所有表单控件

自定义组件.wxml
<view>
  <text>姓名: </text>
  <input name="name" />
</view>
<view>
  <text>学生:</text>
  <switch name="student" />
</view>
父组件.wxml
<form bindsubmit="formSubmit">
  <custom-comp></custom-comp>
  <button type="primary" form-type="submit">在控制台查看输出</button>
</form>

wx://form-field-button

使 form 组件可以识别到这个自定义组件内部的 button ， 如果自定义组件内部有设置了 form-type 的 button ，它将被组件外的 form 接受

父组件.wxml:
<form bindsubmit="submit">
  <input name="name" placeholder="请输入名字"></input>
  <custom-comp></custom-comp>
</form>
自定义组件custom-comp.wxml:
<button form-type="submit">submit</button>
结果：![在这里插入图片描述](https://img-blog.csdnimg.cn/20201208142447868.png)