What are possible patterns for vue3 component export function?

user_6670846 0
Viewed 52

I'm developing vue 3 table component that will have data export feature. Table component can be nested and parent/higher level components should have ability to trigger export and receive underlying data.

One way to achieve this that comes to my mind is to reference table component from parent component level and call export methods directly on table component.

Another idea would be to watch one of the props which could be incremented and change would trigger export event.

Do you have experience with other patters for this scenario (expose component internal method / feature and consume result in parent component). Do you find any drawback of ideas listed above?

Best regards, It_man

vuejs3 design-patterns
1 Answers

Calling the export function from the parent component is a good option. I don't see any downside to it.

I assume you will have an Export button to export the data when the user clicks on it. So adding an Export button right into your Table component would be another approach. You can wrap it into a slot to enable the ability to modify from the parent component.

<div @click="exportData()">
   <slot>
      <button> Export </button> 
   </slot>
</div>

I don't like the props or vuex/pinia approach because it is counter-intuitive. Imagine that you change a state then the user gets prompted to download a file. It is not the purpose of a state.

user_42546810
Related