What are the advantages and disadvantages of slot vs method vs data vs prop?

Question

Vue.js

https://ru.vuejs.org/v2/guide/components-slots.html

What prevents you from calling a getter from vuex, or passing some parameter and rendering the necessary elements, a component through if, or even using the render method and others?
Why is the slot worse and better?
Why and why use it?
Example situations?

Answer 1

slot is a "hole". Part of the parent component can be embedded in it. And this part remains part of the parent.
Here's an example:
You're creating a button component and want the parent to be able to set the text.
Method 1 passing through an attribute: When the value of the parent changes, the following happens:
<my-button>{{$props.text}}</my-button>

1. Parent value changes
   
2. All dependent parameters are recalculated, including $props for the child component
   
3. Vue analyzes all changes, sees that the child component has changed $props
   
4. $props are used in the template, which means that you need to check all the nodes of the child component , compare them with the shadow DOM and determine which parts of the real DOM need to be recalculated.
   

Method 2 via slot
<my-button><slot></slot></my-button>

1. Parent value changes
   
2. All dependent parameters are recalculated
   
3. Vue analyzes all changes, sees that the data used in the slot has changed in the parent.
   
4. it is necessary to check all the nodes that the parent passes in the slot , compare them with the shadow DOM and determine which parts of the real DOM need to be recalculated
   

Summing up:

1. A slot is a convenient API through which a parent can embed something (not just some specific values) in a child component but in isolation from it. While maintaining context.
   
2. When changing reactive data, Vue does not need to analyze changes in the child component, but only in the slot, since the child component itself does not depend on the slot in any way.
   

What prevents you from calling the getter from vuex

All the same as described above. Also, don't overuse vuex. You should strive to write your application as if you didn't have vuex at all. Wherever possible, components should store their data and exchange it directly. vuex is only needed in exceptional situations.

some parameter and render the necessary elements

Often the parameter is not enough. It is necessary to transfer exactly the elements that need to be rendered. Or pass components that are ALREADY rendered. Yes, Vue doesn't always remove/create nodes. Often, if possible, he tries to reuse them and simply move them around the page.

or even use the render method

Your template is compiled into a render function. In fact, you can only use the render function, but this is not very convenient, and deprives Vue of the ability to apply some optimizations. Therefore, a template-compiler was invented that takes your html and translates it into a render function. You can see how it works here

Answer 2

Take a look at this example:
https://bootstrap-vue.js.org/docs/components/table/
how flexible the table has become when using slots!