受控组件

Wux Weapp 一些组件中存在 defaultParam、param、controlled 其中一个或多个属性（param 代指）。

  • 如果组件指定了 defaultParam 并且 controlled 为 false 时，那么这个组件就是非受控组件，在组件初始化（attached 生命周期函数）时指定一下默认值，即只生效一次，之后的状态由组件内部维护，也就是说之后再传值给 defaultParam 将不会生效。
  • 如果组件指定了 param 并且 controlled 为 true 时，那么这个组件就是受控组件，将会时刻响应父组件中数据的变化，也就是说 param 一经设置就始终是这个值，由于组件内部不再维护状态变化，因此只能通过调用者来控制组件 param 的改变。

如何选择

什么时候使用非受控组件

一般用于无任何动态初始值信息的情况； 例如某些 form 表单创建信息时，input 表单元素都没有初始值，需要用户输入的情况。

  1. <wux-input label="name" defaultValue="">

什么时候使用受控组件

一般用在需要动态设置其初始值的情况；例如某些 form 表单信息编辑时，input 表单元素需要初始显示服务器返回的某个值然后进行编辑的情况。

  1. <wux-input label="name" value="{{ name }}" controlled>

优势与劣势

  • 非受控组件更方便快捷，代码量小，但是控制能力比较弱。
  • 非受控组件的优势在于组件能够直接反应用户输入，其值会随用户的输入而改变。
  • 受控组件的控制能力强，代码量较多，在开发中应根据实际情况进行相应的选择。
  • 受控组件的优势在于组件能够实现对用户输入的验证，或者对用户交互做其他的处理，如过滤敏感词汇等。