Vue如何避免冗余实现元素带/不带a标签包裹的渲染

嘿，我懂这种重复写相同代码的烦躁！你遇到的问题核心是Vue模板要求标签必须完整闭合，没法像原生JS那样动态拼接开闭标签，不过有好几种干净的方法能避免冗余，给你列两个最实用的：

方案一：封装一个复用的链接包裹组件 #

这是最推荐的方案，因为组件复用性强，代码可读性也高，以后其他地方需要类似逻辑直接拿来用就行。

首先新建一个LinkWrapper.vue组件：

<template>
  <!-- 如果有link，就用a标签包裹插槽内容；没有就直接渲染插槽 -->
  <a v-if="link" :href="link">
    <slot />
  </a>
  <slot v-else />
</template>

<script>
export default {
  props: {
    link: {
      type: String,
      default: null,
      required: false
    }
  }
}
</script>

然后在你的父组件里引入并使用它：

<template>
  <div>
    <div v-for="(item, i) in items" :key="i">
      <!-- 把需要展示的内容塞进插槽里，不用重复写p标签啦 -->
      <LinkWrapper :link="item.link">
        <p>{{ item.text }}</p>
      </LinkWrapper>
    </div>
  </div>
</template>

<script>
import LinkWrapper from './LinkWrapper.vue'

export default {
  components: { LinkWrapper },
  data() {
    return {
      items: [
        { text: 'item with link', link: '#' },
        { text: 'item without link' }
      ]
    }
  }
}
</script>

方案二：使用渲染函数（无需新增组件） #

如果你不想单独写组件，也可以用Vue的渲染函数直接生成DOM结构，完美避开模板里的重复：

<script>
export default {
  data() {
    return {
      items: [
        { text: 'item with link', link: '#' },
        { text: 'item without link' }
      ]
    }
  },
  render(h) {
    // 遍历items，逐个生成对应的DOM节点
    const itemNodes = this.items.map((item, index) => {
      // 先创建核心内容：p标签
      const content = h('p', item.text)
      // 根据是否有link，决定用a包裹还是直接返回内容
      const wrappedContent = item.link 
        ? h('a', { attrs: { href: item.link } }, content) 
        : content
      // 外层的div容器
      return h('div', { key: index }, wrappedContent)
    })
    // 返回最外层的div
    return h('div', itemNodes)
  }
}
</script>

这两种方案都能生成你想要的渲染结果，完全避免了重复写<p>{{ item.text }}</p>的冗余问题。

内容的提问来源于stack exchange，提问作者tom