vue2知识点————(vue插槽，透传 Attributes )

vue 插槽

插槽（slot）是一种强大的特性，允许在组件的模板中定义带有特定用途的“插槽”，然后在组件的使用者中填充内容。插槽能够使组件更加灵活，让组件的结构更容易复用和定

具名插槽（Named Slots）：

• 具名插槽允许你在组件中定义多个插槽，并为每个插槽取一个名称。
• 在使用组件时，可以使用 v-slot 指令来为具名插槽提供内容，并通过指定插槽的名称来匹配到对应的插槽。

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>这是标题</h1>
      </template>
      <template v-slot:content>
        <p>这是内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

作用域插槽（Scoped Slots）：

• 作用域插槽允许子组件向父组件传递数据。
• 使用 v-slot 的缩写语法 #，可以在父组件的模板中访问子组件中的数据，并在父组件的作用域中使用这些数据。

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是子组件传递的消息'
    };
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot="{ message }">
        <p>{{ message }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

默认插槽（Default Slots）：

• 如果组件没有具名插槽，那么其所有内容都会被放入默认插槽中。
• 默认插槽可以简化组件的使用，使其更加直观。

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <p>这段内容会放在默认插槽中</p>
    </ChildComponent>
  </div>
</template>

作用域插槽的使用场景：

• 当你需要在父组件中使用子组件的数据时，作用域插槽非常有用。
• 作用域插槽使得组件的数据传递更加灵活，能够适应各种复杂的场景。

1. 插槽的使用方法：

   • 在组件的模板中，使用 <slot> 元素来定义插槽的位置。
   • 在组件的使用者中，使用 v-slot 或 # 来填充插槽。

2. 动态插槽名：

   • 插槽名可以是动态的，可以使用 JavaScript 表达式来指定插槽的名称。
   • 这样可以根据组件的状态或属性来动态决定插槽的内容。

3. 作用域插槽的数据传递：

   • 通过在子组件中使用 v-bind 将数据绑定到插槽上，可以将数据传递给父组件。
   • 父组件可以在使用插槽时，通过作用域插槽的参数来访问这些数据。

动态插槽名：

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :name="slotName"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotName: 'dynamicSlot'
    };
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template v-slot:[dynamicSlot]>
        <p>这段内容会放在动态插槽中</p>
      </template>
    </ChildComponent>
  </div>
</template>

透传 Attributes

 Attributes 是指组件的特性或属性，可以通过这些特性来配置组件的行为或样式。Attributes 可以是静态的，也可以是动态的，可以接受字符串、数字、布尔值等不同类型的值。Attributes 是组件的重要配置选项之一，用于与组件进行交互和通信。

静态 Attributes：

• 静态 Attributes 是在组件声明或使用时直接指定的，其值是固定的，不会随着组件状态的改变而改变。

<!-- MyComponent.vue -->
<template>
  <div :class="className">组件内容</div>
</template>

<script>
export default {
  props: {
    className: String
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyComponent class="static-class"></MyComponent>
  </div>
</template>

动态 Attributes：

• 动态 Attributes 是根据组件的状态或属性值动态地指定的，可以根据需要在运行时更改。

<!-- MyComponent.vue -->
<template>
  <div :class="className">组件内容</div>
</template>

<script>
export default {
  props: {
    className: String
  },
  data() {
    return {
      dynamicClass: 'dynamic-class'
    };
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyComponent :class="dynamicClass"></MyComponent>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicClass: 'another-dynamic-class'
    };
  }
};
</script>

绑定 Attributes：

• 除了绑定类名之外，还可以绑定其他 Attributes，如 id、style 等。

<!-- MyComponent.vue -->
<template>
  <div :id="id" :style="{ color: textColor }">组件内容</div>
</template>

<script>
export default {
  props: {
    id: String,
    textColor: String
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyComponent :id="componentId" :text-color="componentTextColor"></MyComponent>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentId: 'component-id',
      componentTextColor: 'red'
    };
  }
};
</script>

特殊 Attributes：

• Vue.js 2 中还有一些特殊的 Attributes，如 key、ref 等，它们具有特殊的含义和用途，在特定场景下使用。

<!-- MyComponent.vue -->
<template>
  <input :value="inputValue" @input="updateInput">
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    updateInput(event) {
      this.inputValue = event.target.value;
    }
  }
};
</script>