揭秘非Prop的Attribute：无处不在却容易被忽视的组件属性

2023-12-13 20:18:14

前言

在Vue组件开发过程中，我们经常会遇到一些看似简单的属性，但却对组件的功能和样式起着至关重要的作用，它们就是非Prop的Attribute。顾名思义，非Prop的Attribute是指传向一个组件，但是该组件并没有相应props或emits定义的attribute。常见的示例包括class、style和id属性。

1. Attribute继承

非Prop的Attribute最基本也是最常见的一种形式就是Attribute继承。当一个组件包含子组件时，父组件的非Prop的Attribute会自动继承给子组件。例如，以下代码中，父组件的class属性和id属性会被继承给子组件：

<template>
  <div class="parent" id="parent">
    <child />
  </div>
</template>

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

export default {
  components: { Child },
};
</script>

<template>
  <div class="child" id="child">
  </div>
</template>

<script>
export default {
};
</script>

在上面的例子中，子组件继承了父组件的class和id属性，因此子组件的HTML代码将变成如下所示：

<div class="parent child" id="parent">
  <div class="child" id="child">
  </div>
</div>

Attribute继承在很多场景下都非常有用。例如，我们可以通过在父组件上设置class属性，来控制子组件的样式。或者，我们可以通过在父组件上设置id属性，来方便地通过JavaScript代码找到子组件。

2. Slot

Slot是非Prop的Attribute的另一种重要形式。Slot允许我们在组件内部定义可变内容的区域，并在父组件中填充这些区域。这使得我们可以创建可复用的组件，并在不同的场景下使用它们。

以下是一个简单的Slot示例：

<template>
  <div class="parent">
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
};
</script>

<template>
  <div class="child">
    <p>默认内容</p>
  </div>
</template>

<script>
export default {
};
</script>

在上面的例子中，父组件定义了一个名为content的Slot。子组件则填充了这个Slot，并提供了自己的内容。当我们使用子组件时，我们可以通过在父组件中定义Slot的内容来改变子组件的显示内容。

Slot在构建复杂组件时非常有用。例如，我们可以创建一个可复用的表单组件，并允许用户通过Slot来指定表单的标题、字段和按钮。

3. 自定义Attribute

除了Attribute继承和Slot之外，我们还可以创建自己的自定义Attribute。自定义Attribute允许我们向组件传递一些额外的信息，这些信息不会被组件本身使用，但可以被组件的父组件或其他组件使用。

以下是一个自定义Attribute的示例：

<template>
  <div class="parent">
    <child :my-custom-attribute="value"></child>
  </div>
</template>

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

export default {
  components: { Child },
};
</script>

<template>
  <div class="child">
    <p>{{ myCustomAttribute }}</p>
  </div>
</template>

<script>
export default {
  props: ['myCustomAttribute'],
};
</script>