Представим что в некотором компоненте вызывается другой компонент которые использует слот из первого, в области, которая не всегда отображается.
Но проблема в том, что в этом случае слот все равно рендерится в первом компоненте, хотя и не будет отображен.
Для понимания сделал совсем простой компонент:
<script type="text/x-template" id="foldet-block">
<div>
<span class="btn-link" v-on:click="toggle">{{anchor_text}}</span>
<div v-if="state.show"><slot></slot></div>
</div>
</script>
<script>
Vue.component('foldet-block', {
props: {
show: {type: Boolean, default: false},
anchor: {type: String},
anchor_show: {type: String, default: ''},
},
data () {
return {
state: {
show: false
},
}
},
created () {
this.state.show = this.show
},
computed: {
anchor_text () {
return this.state.show?this.anchor:(this.anchor_show?this.anchor_show:this.anchor)
}
},
methods: {
toggle () {
this.state.show = !this.state.show;
}
},
template: '#foldet-block'
});
</script>
Как видно он просто показывает или не показывает блок переданный ему.
Представим что он вызывается внутри другого компонента:
<foldet-block
v-bind:anchor="'показать'"
v-bind:anchor_show="'скрыть'"
><p>{{text}}</p></foldet-block>
И внутри этого компонента переменная text какая-то сложновычисляемая. Как бы ее не вычислять, если блок в foldet-block скрыт?
