发布于 由admin

Vue的“与“：如何在组件中传递非`prop`属性？

Vue 的 $attrs 与 inheritAttrs：组件非 Prop 属性传递详解

大家好，今天我们来深入探讨 Vue 组件中一个非常重要的概念：非 Prop 属性的传递，以及 Vue 提供的两个关键工具：$attrs 和 inheritAttrs。理解并熟练运用它们，可以显著提升组件的灵活性和可复用性，避免不必要的代码冗余。

什么是 Prop 和非 Prop 属性？

在 Vue 组件中，我们通过 props 选项来声明组件可以接收的属性。这些通过 props 声明的属性被称为 Prop 属性。

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  }
};
</script>

在这个例子中，name 和 age 就是 Prop 属性。父组件可以通过以下方式传递它们：

<template>
  <MyComponent name="Alice" age="30" />
</template>

<script>
import MyComponent from './MyComponent.vue';

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

那么，如果我们在父组件中传递了 MyComponent 组件没有通过 props 声明的属性，会发生什么呢？ 例如：

<template>
  <MyComponent name="Alice" age="30" class="custom-class" data-id="123" />
</template>

在这个例子中，class="custom-class" 和 data-id="123" 就是非 Prop 属性。这些属性并不会被 MyComponent 组件的 props 选项接收。 它们会发生什么，以及我们如何控制它们，就是我们今天要讨论的核心。

默认行为：非 Prop 属性的继承

Vue 的默认行为是：将非 Prop 属性自动添加到组件的根元素上。 所谓“根元素”，就是组件 template 中最外层的那个元素。

让我们修改 MyComponent.vue 的模板，增加一个根元素：

<template>
  <div class="my-component">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  }
};
</script>

现在，当我们使用 MyComponent 并传递非 Prop 属性时：

<template>
  <MyComponent name="Alice" age="30" class="custom-class" data-id="123" />
</template>

最终渲染出来的 HTML 将是：

<div class="my-component custom-class" data-id="123">
  <p>Name: Alice</p>
  <p>Age: 30</p>
</div>

可以看到，class="custom-class" 和 data-id="123" 被自动添加到了 MyComponent 的根元素 <div> 上。 这就是 Vue 的默认行为。

inheritAttrs：控制属性继承

Vue 提供了 inheritAttrs 选项，允许我们控制是否要继承非 Prop 属性。 inheritAttrs 的默认值为 true，也就是我们刚才看到的默认行为。

如果我们将 inheritAttrs 设置为 false：

<template>
  <div class="my-component">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  inheritAttrs: false
};
</script>

现在，当我们再次使用 MyComponent 并传递非 Prop 属性时：

<template>
  <MyComponent name="Alice" age="30" class="custom-class" data-id="123" />
</template>

最终渲染出来的 HTML 将是：

<div class="my-component">
  <p>Name: Alice</p>
  <p>Age: 30</p>
</div>

可以看到，class="custom-class" 和 data-id="123" 没有被添加到根元素上。 它们被“拦截”了。 那么，这些被拦截的属性去哪里了呢？ 它们存在于 $attrs 对象中。

$attrs：访问非 Prop 属性

$attrs 是一个对象，包含了所有父作用域中传递给组件，但没有被组件 props 选项声明的属性。 只有当 inheritAttrs 被设置为 false 时，我们才能真正“拦截”这些属性，并通过 $attrs 来访问它们。

让我们修改 MyComponent.vue，利用 $attrs 将属性手动添加到根元素上：

<template>
  <div class="my-component" v-bind="$attrs">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  inheritAttrs: false
};
</script>

这里，我们使用了 v-bind="$attrs"。 v-bind 指令可以绑定一个对象到 HTML 元素上，对象的每个属性都会被作为元素的属性。 v-bind="$attrs" 的作用就是将 $attrs 对象中的所有属性绑定到 <div> 元素上。

现在，当我们再次使用 MyComponent 并传递非 Prop 属性时：

<template>
  <MyComponent name="Alice" age="30" class="custom-class" data-id="123" />
</template>

最终渲染出来的 HTML 将是：

<div class="my-component custom-class" data-id="123">
  <p>Name: Alice</p>
  <p>Age: 30</p>
</div>

效果和默认行为一样，但这次我们是手动控制了属性的添加。

$attrs 的用途：更灵活的属性传递

为什么要费这么大劲，先禁用 inheritAttrs，再手动绑定 $attrs 呢？ 因为这样可以让我们更灵活地控制属性的传递。

1. 将属性传递给子组件

有时候，我们希望将非 Prop 属性传递给组件内部的子组件，而不是根元素。 例如，MyComponent 组件内部可能包含一个 MyInput 组件，我们希望将 class 和 data-id 传递给 MyInput。

首先，创建 MyInput.vue：

<template>
  <input type="text" v-bind="$attrs">
</template>

<script>
export default {
  inheritAttrs: false // 阻止继承，明确只接收通过 v-bind 传递的属性
};
</script>

然后，修改 MyComponent.vue：

<template>
  <div class="my-component">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <MyInput />
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  inheritAttrs: false,
  mounted() {
    // 将 $attrs 传递给 MyInput 组件
    // 通过 $emit('update:attrs', this.$attrs) 也可以实现类似的效果，但需要父组件监听事件
    // 更好的方式是在模板中直接绑定
  }
};
</script>

注意，我们没有在 MyComponent 的模板中使用 v-bind="$attrs"。 现在，当我们使用 MyComponent 并传递非 Prop 属性时：

<template>
  <MyComponent name="Alice" age="30" class="custom-class" data-id="123" />
</template>

class="custom-class" 和 data-id="123" 不会被添加到 MyComponent 的根元素上，也不会被传递给 MyInput 组件。 因为我们没有在任何地方显式地绑定 $attrs。

要将属性传递给 MyInput，我们需要在 MyComponent 的模板中绑定 $attrs：

<template>
  <div class="my-component">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <MyInput v-bind="$attrs" />
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  inheritAttrs: false
};
</script>

现在，最终渲染出来的 HTML 将是：

<div class="my-component">
  <p>Name: Alice</p>
  <p>Age: 30</p>
  <input type="text" class="custom-class" data-id="123">
</div>

class="custom-class" 和 data-id="123" 被成功传递给了 MyInput 组件。

2. 过滤和修改属性

$attrs 还可以让我们在传递属性之前对其进行过滤和修改。 例如，我们可能只想将 data-id 传递给 MyInput，而忽略 class。

<template>
  <div class="my-component">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <MyInput v-bind="filteredAttrs" />
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  inheritAttrs: false,
  computed: {
    filteredAttrs() {
      const { 'data-id': dataId, ...rest } = this.$attrs; // 解构出 data-id 并忽略其他属性
      return { 'data-id': dataId }; // 返回只包含 data-id 的对象
      // 或者更安全的方式
      // const filtered = {};
      // if (this.$attrs['data-id']) {
      //   filtered['data-id'] = this.$attrs['data-id'];
      // }
      // return filtered;

    }
  }
};
</script>

在这个例子中，我们使用了一个计算属性 filteredAttrs 来过滤 $attrs 对象，只保留 data-id 属性。 然后，我们将 filteredAttrs 绑定到 MyInput 组件上。

现在，最终渲染出来的 HTML 将是：

<div class="my-component">
  <p>Name: Alice</p>
  <p>Age: 30</p>
  <input type="text" data-id="123">
</div>

只有 data-id 被传递给了 MyInput 组件。

我们还可以修改属性的值。 例如，我们可能想在 data-id 的值前面加上一个前缀：

<template>
  <div class="my-component">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <MyInput v-bind="modifiedAttrs" />
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: String,
      required: true
    }
  },
  inheritAttrs: false,
  computed: {
    modifiedAttrs() {
      const modified = {};
      if (this.$attrs['data-id']) {
        modified['data-id'] = 'prefix-' + this.$attrs['data-id'];
      }
      return modified;
    }
  }
};
</script>

现在，最终渲染出来的 HTML 将是：

<div class="my-component">
  <p>Name: Alice</p>
  <p>Age: 30</p>
  <input type="text" data-id="prefix-123">
</div>

data-id 的值被修改为了 prefix-123。

3. 处理事件监听器

$attrs 还可以包含事件监听器（以 on 开头的属性）。 例如：

<template>
  <MyComponent name="Alice" age="30" @click="handleClick" />
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  methods: {
    handleClick() {
      console.log('Clicked!');
    }
  }
};
</script>

在这个例子中，@click="handleClick" 实际上是传递了一个 onClick 属性给 MyComponent。 如果 MyComponent 没有声明 onClick 为 Prop 属性，那么 onClick 就会被包含在 $attrs 中。

我们可以通过 $attrs.onClick() 来触发这个事件监听器。 例如，在 MyComponent.vue 中：

<template>
  <div class="my-component" @click="triggerClick">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  },
  inheritAttrs: false,
  methods: {
    triggerClick() {
      if (this.$attrs.onClick) {
        this.$attrs.onClick();
      }
    }
  }
};
</script>

在这个例子中，我们在 MyComponent 的根元素上监听了 click 事件，并在 triggerClick 方法中触发了 $attrs.onClick()。 这样，当点击 MyComponent 时，父组件的 handleClick 方法也会被调用。

最佳实践和注意事项

  • 明确声明 Props： 始终明确地声明组件的 Prop 属性。 这可以提高代码的可读性和可维护性，并避免意外的属性传递。
  • 谨慎使用 inheritAttrs： 除非有特殊需求，否则不建议禁用 inheritAttrs。 默认行为通常是合理的，可以简化代码。
  • 合理利用 $attrs： 当需要更灵活地控制属性传递时，可以考虑使用 $attrs。 例如，将属性传递给子组件，过滤和修改属性，或者处理事件监听器。
  • 避免属性冲突： 当手动绑定 $attrs 时，要小心属性冲突。 如果 $attrs 中包含的属性与组件自身的属性冲突，可能会导致意想不到的结果。可以使用计算属性进行合并和优先级控制。
  • 测试： 对使用了 $attrs 和 inheritAttrs 的组件进行充分的测试，确保属性传递的行为符合预期。
  • 类型检查： 即使是非 Prop 属性，也应该注意类型检查。 可以使用 v-bind 的修饰符（例如 .number、.string）来进行简单的类型转换，或者使用更复杂的验证逻辑。

案例分析：一个可复用的按钮组件

让我们通过一个实际的案例来演示 $attrs 的用法。 假设我们要创建一个可复用的按钮组件，可以接受各种属性，例如 class、data-id、disabled 等，并将这些属性传递给底层的 <button> 元素。

<!-- MyButton.vue -->
<template>
  <button class="my-button" v-bind="$attrs">
    <slot />
  </button>
</template>

<script>
export default {
  inheritAttrs: false
};
</script>

在这个例子中，我们禁用了 inheritAttrs，并通过 v-bind="$attrs" 将所有非 Prop 属性传递给 <button> 元素。 我们还使用了 <slot> 插槽，允许父组件向按钮中插入内容。

现在，我们可以像这样使用 MyButton 组件：

<template>
  <MyButton class="primary" data-id="submit-button" disabled @click="handleSubmit">
    Submit
  </MyButton>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  },
  methods: {
    handleSubmit() {
      console.log('Submitting...');
    }
  }
};
</script>

最终渲染出来的 HTML 将是：

<button class="my-button primary" data-id="submit-button" disabled>
  Submit
</button>

可以看到，所有的属性都被成功传递给了 <button> 元素。 这个 MyButton 组件非常灵活，可以接受各种属性，并可以轻松地进行样式和功能的定制。

总结一下

功能 描述 使用场景
Prop 属性 通过 props 选项声明的属性，组件明确接收的属性。 组件需要接收特定数据并进行处理时。
非 Prop 属性 父组件传递给子组件，但子组件没有通过 props 声明的属性。 通常用于传递 HTML 属性 (例如 class, data-*, aria-*) 或事件监听器。
inheritAttrs 控制是否将非 Prop 属性自动添加到组件的根元素上。 默认值为 true。 true: 默认行为，适用于大多数情况。 false: 当需要手动控制属性传递时，例如将属性传递给子组件，或者过滤和修改属性。
$attrs 一个对象，包含了所有父作用域中传递给组件，但没有被组件 props 选项声明的属性。 只有当 inheritAttrs 被设置为 false 时才有效。 用于访问和操作非 Prop 属性。 可以用于将属性传递给子组件，过滤和修改属性，或者处理事件监听器。

$attrs 和 inheritAttrs 是 Vue 组件中处理非 Prop 属性的强大工具。 掌握它们，可以让你编写更灵活、更可复用的组件，并避免不必要的代码冗余。记住，明确声明 Props，谨慎使用 inheritAttrs，合理利用 $attrs，并进行充分的测试，是编写高质量 Vue 组件的关键。

希望今天的讲解对大家有所帮助！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注