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>