javascript - 在 vue 文件中的组件内重用少量标记

Question

我刚刚开始学习 Vue，在做一个非常基本的模板时，我发现自己在同一个模板中重复少量的 HTML/组件，因为 v-if 和不同的包含组件取决于它的结果。

虽然我已经解决了几次重复相同行的问题，但我发现它不太理想，并且想知道是否有更好的方法让它变干(无需创建新组件)。

我希望能够重用以下几行:

{{ item.name }}
And a bit more of markup, but not much and no "functionality"

明确地用一个新组件创建一个新的 vue 文件是多余的。但是不得不重复这些台词(真正的台词稍微复杂一点)真的让我有点痛苦。

这是一个非常简单的例子来说明这个问题。

请记住，这不是真正的代码，真正的代码在一个 vue 文件中(但我不知道如何在这里或在 codepen 中模拟它)!!

var app = new Vue({
  el: '#app',
  data: {
    items: [
      {
        name: 'name 1',
        link: 'http://www.google.com'
      },
      {
        name: 'name 2',
        link: ''
      },
    ]
  },
  methods: {
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="app">
  <template v-for="item in items">
    <a :href="item.link" v-if="item.link != ''">
      {{ item.name }}<br>
      And a bit more of markup, but not much and no functionality
    </a>
    <p v-else>
      {{ item.name }}<br>
      And a bit more of markup, but not much and no functionality
    </p>
  </template>
</div>

Answer 1

您可以使用将“is”属性设置为您要呈现的标记类型的组件:

<div id="app">
  <template v-for="item in items">
    <component :href="item.link || false" :is="item.link ? 'a' : 'p'">
      {{ item.name }}<br>
      And a bit more of markup, but not much and no functionality
    </component>        
  </template>
</div>

href 上的 false 导致 attr 根本不被渲染