Как бы не рендерить слот, пока он не нужен?

Представим что в некотором компоненте вызывается другой компонент которые использует слот из первого, в области, которая не всегда отображается.
Но проблема в том, что в этом случае слот все равно рендерится в первом компоненте, хотя и не будет отображен.

Для понимания сделал совсем простой компонент:
<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 скрыт?
  • Вопрос задан
  • 56 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
<foldet-block
  v-bind:anchor="'показать'"
v-bind:anchor_show="'скрыть'"
  ><template v-slot><p>{{text}}</p></template></foldet-block>

Суть трюка в том что v-slot превращает слот в scoped, а scoped слот ждёт для ренедера входных данных от родителя.
P.S. В случае если в слот идёт только один компонент(и это компонент, а не нативный тег) можно опустить template и ставить v-slot прям на сам компонент.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы