title: vue.js: How to reuse a template in a component without exporting it as a new component
body: <p>There are times when you have to reuse a template inside a component. You cannot iterate them because they are not rendered sequentially. Consider the following example:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;template&gt;
            &lt;span&gt;{{yearly.text}}&lt;/span&gt;
            &lt;span :class="spanClassName(yearly.increase)"&gt;&lt;i :class="iconClassName"&gt;&lt;/i&gt;{{yearly.increase}}%&lt;/span&gt;
          &lt;/template&gt;
          &lt;YearlyChart/&gt;
          &lt;template&gt;
            &lt;span&gt;{{monthly.text}}&lt;/span&gt;
            &lt;span :class="spanClassName(monthly.increase)"&gt;&lt;i :class="iconClassName"&gt;&lt;/i&gt;{{monthly.increase}}%&lt;/span&gt;
          &lt;/template&gt;
          &lt;MonthlyTable/&gt;
          &lt;template&gt;
            &lt;span&gt;{{weekly.text}}&lt;/span&gt;
            &lt;span :class="spanClassName(weekly.increase)"&gt;&lt;i :class="iconClassName"&gt;&lt;/i&gt;{{weekly.increase}}%&lt;/span&gt;
          &lt;/template&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      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 &gt;= 0 ? 'text-success' : 'text-danger'
          },
          iconClassName: function(increase) {
              increase &gt;= 0 ? 'fa fa-arrow-up' : 'fa fa-arrow-down'
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I don't want to export this tiny template (composed of two <code>span</code> tags) as another component because I believe it's not very efficient.
  In React, this can be done very simply:</p>
  
  <pre><code>const renderIncrease = (stat) =&gt; (
      &lt;span&gt;{stat.text}&lt;/span&gt;
      &lt;span className={this.spanClassName(stat)}&gt;&lt;i className={this.iconClassName(stat)}&gt;{stat.increase}&lt;/i&gt;&lt;/span&gt;
  )
  
  render() {
      return (
          &lt;&gt;
              {renderIncrease(this.state.yearly)}
              // .. some other elements
              {renderIncrease(this.state.monthly)}
          &lt;/&gt;
      )
  }
  </code></pre>
  
  <p>Angular can do this too because it has template reference variable(#). </p>
  
  <p>Does Vue.js has a similar feature like this?</p>