vue. js: Как повторно использовать шаблон в компоненте, не экспортируя его как новый компонент - PullRequest
Новая
       6

vue. js: Как повторно использовать шаблон в компоненте, не экспортируя его как новый компонент

0 голосов
/ 28 февраля 2020

Бывают случаи, когда вам приходится повторно использовать шаблон внутри компонента. Вы не можете повторить их, потому что они не отображаются последовательно. Рассмотрим следующий пример: 

<template>
    <div>
        <template>
          <span>{{yearly.text}}</span>
          <span :class="spanClassName(yearly.increase)"><i :class="iconClassName"></i>{{yearly.increase}}%</span>
        </template>
        <YearlyChart/>
        <template>
          <span>{{monthly.text}}</span>
          <span :class="spanClassName(monthly.increase)"><i :class="iconClassName"></i>{{monthly.increase}}%</span>
        </template>
        <MonthlyTable/>
        <template>
          <span>{{weekly.text}}</span>
          <span :class="spanClassName(weekly.increase)"><i :class="iconClassName"></i>{{weekly.increase}}%</span>
        </template>
    </div>
</template>
<script>
    data() {
        return {
            yearly: {
                text: "Yearly Sales",
                increase: 5
            },
            monthly: {
                text: "Monthly Sales Dropping",
                increase: -7.2
            },
            weekly: {
                text: "Awesome Weekly Sales!",
                increase: 0.2
            }
        }
    },
    methods: {
        spanClassName: function(increase) {
            increase >= 0 ? 'text-success' : 'text-danger'
        },
        iconClassName: function(increase) {
            increase >= 0 ? 'fa fa-arrow-up' : 'fa fa-arrow-down'
        }
    }
</script>

Я не хочу экспортировать этот крошечный шаблон (состоящий из двух span тегов) как другой компонент, потому что я считаю, что он не очень эффективен. В React это можно сделать очень просто: 

const renderIncrease = (stat) => (
    <span>{stat.text}</span>
    <span className={this.spanClassName(stat)}><i className={this.iconClassName(stat)}>{stat.increase}</i></span>
)

render() {
    return (
        <>
            {renderIncrease(this.state.yearly)}
            // .. some other elements
            {renderIncrease(this.state.monthly)}
        </>
    )
}

Angular может сделать это тоже, потому что у него есть переменная ссылки на шаблон (#).

Имеет ли Vue. js похожую функцию?

1 Ответ

0 голосов
/ 28 февраля 2020

Попробуйте это 

<ng-template #nameRef >
        {{ theContent}}
</ng-template>

, а затем 

ng-template [ngTemplateOutlet]="nameRef"></ng-template>
...