面试题：Vue Fragment中如何正确传递和处理多个根节点的属性？

在Vue中，Fragment（<template>标签）允许多个根节点存在。当需要处理多个根节点的属性时，可以通过以下方式来正确传递和处理属性，避免属性冲突或丢失：

手动分配属性：
- 手动将接收到的属性分配到不同的根节点上。

<template>
  <template v-bind="$attrs">
    <div v-bind="pickAttrs('div1')">Div 1</div>
    <div v-bind="pickAttrs('div2')">Div 2</div>
  </template>
</template>

<script>
export default {
  computed: {
    pickAttrs() {
      return (prefix) => {
        const result = {};
        Object.entries(this.$attrs).forEach(([key, value]) => {
          if (key.startsWith(prefix)) {
            result[key.slice(prefix.length)] = value;
          }
        });
        return result;
      };
    }
  }
};
</script>

在上述代码中：

$attrs包含了父组件传递过来的所有非prop属性。
pickAttrs计算属性根据前缀（这里以div1和div2为例）来筛选并返回对应的属性对象，然后分别绑定到不同的<div>上。

使用第三方库（如vue-multiple-root-attrs）：
- 安装vue - multiple - root - attrs库：npm install vue - multiple - root - attrs。
- 使用示例：

<template>
  <fragment v-bind="$attrs">
    <div div1 - id="1">Div 1</div>
    <div div2 - class="special">Div 2</div>
  </fragment>
</template>

<script>
import Fragment from 'vue - multiple - root - attrs';

export default {
  components: {
    Fragment
  }
};
</script>

这个库会自动将属性根据根节点标签名的前缀（如div1 -、div2 -）分配到对应的根节点上，从而避免属性冲突或丢失。

通过以上方法，可以在Vue开发中使用Fragment处理多个根节点属性时，有效避免常见错误。

星途面试题库

面试题：Vue Fragment中如何正确传递和处理多个根节点的属性？

知识考点

面试题答案