如何操作Vue自定义组件UnorderedList内部传入的HTML标签内容

你可以通过以下两种方式实现需求，优先推荐纯CSS实现，成本最低无需额外逻辑处理：

方案1：纯CSS实现（推荐） #

利用CSS伪元素::before给每个传入的<p>标签自动添加前缀，组件代码修改如下：

<template>
  <!-- 动态绑定类名控制是否显示短横线前缀 -->
  <ul :class="{ 'dashed-list': dashed }">
    <!-- 渲染父组件传入的所有插槽内容 -->
    <slot />
  </ul>
</template>

<script>
export default {
  name: 'UnorderedList',
  props: {
    dashed: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style scoped>
.dashed-list p::before {
  content: "- ";
  margin-right: 4px;
}
</style>

直接使用你原来的组件调用方式即可生效。

方案2：JS处理插槽内容（适合需要复杂内容操作的场景） #

如果后续你需要对插槽内容做更多逻辑处理，可以通过操作插槽VNode实现：

<script>
export default {
  name: 'UnorderedList',
  props: {
    dashed: {
      type: Boolean,
      default: false,
    },
  },
  render(h) {
    // 获取默认插槽的所有内容节点
    const slotNodes = this.$slots.default?.() || []
    // 遍历处理每个p标签节点
    const processedNodes = slotNodes.map(node => {
      // 只处理p标签节点
      if (node.type === 'p' && this.dashed) {
        // 在p标签内容最前面加入短横线前缀
        node.children = ['- ', ...node.children]
      }
      return node
    })
    // 渲染ul包裹处理后的节点
    return h('ul', processedNodes)
  }
}
</script>

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