Reactive Patterns — Standard to Custom & Custom to Standard

大家好，今天我们来讲一个小知识点，就是在Flow里面，标准组件和自定义组件之间怎么互相传递数据，让界面能实时反应。这个概念在LWC里叫做“反应性”，其实就是数据变了，界面自动跟着变。 首先，当标准组件要把数据传给自定义组件的时候，我们叫它“标准到自定义反应性”。这时候，自定义组件需要有一个属性，用@api声明，而且这个属性的类型必须和标准组件输出的类型保持一致。举个例子，假如有一个Text组件，它输出一个String类型的颜色名称，我们要把它传给我们自己写的组件。那我就在自定义组件里写一个@api color，这样Flow运行时就会自动把Text的值赋给color属性。然后我在组件里用内联样式，比如 style="color:{color}"，就能看到颜色立刻变了。很简单，对吧？ 反过来，当自定义组件要主动通知Flow，我里面的值变了，让其他组件都能感知到，这就叫“自定义到标准反应性”。这时候不能只靠@api属性自动扩散，必须手动触发一个事件，叫FlowAttributeChangeEvent。这个事件构造函数接受两个参数：第一个是属性的名字，要和你JS文件里@api声明的名字一模一样，包括大小写；第二个是更新后的新值。你把这个事件派发出去，Flow运行时就会收到通知，把值传给其他绑定在一起的组件。 这里有个关键点要注意：我们要用getter和setter来管理这个@api属性。为什么？因为setter会被调用两次。第一次是当你在组件内部触发FlowAttributeChangeEvent后，Flow会回过头来重新设一次值；第二次是当其他组件改变了绑定到这个属性的值，Flow也会调用这个setter。这种双重调用保证了无论变化是我自己发起的，还是别人传过来的，数据都能更新，界面保持同步。这就是getter/setter模式的重要性。 所以，同学们记住这三个要点：@api属性类型匹配，FlowAttributeChangeEvent主动通知，以及用getter/setter保证双向同步。这样你写的自定义组件就能在Flow里和标准组件完美配合了。