You actually can do this right away if you use a different approach and are ok with modifying variables with js. Instead of creating an internal variable and expose it to the parent pass a global variable of type object as a property to the component and with js change the properties of this object. You automatically get reactive variable accessible from outside the component and basic operations like resetting the value without the need to trigger component’s actions.
The usual counter example:
-
create a global variable that will store the data
-
create a button and transform it to a component
-
add a property of type any. As default value manually add an object like the initial global variable. This is optional and is used only to have variable’s hints in the editor.
-
bind the button text to the component property
-
add a workflow to handle the increment logic
-
add a js action to update the data in the component property. In this case we want to increment the
countproperty. Note how we don’t need to reference the global variable but only the component property. This way multiple instances of the component can access differents variables.
-
execute the workflow on button click
-
outside the component you can access the global variable normally. Resetting the counter only requires to reset the corresponding global variable.
Result:
