插槽定义
插槽(Slot)是vue.js组件中一种特殊的机制,用于在组件的模板中预留一些可变化的内容。 通过插槽,父组件可以将任意内容插入到子组件中指定的位置,从而增强了组件的灵活性和复用性。
插槽的分类
插槽可以分为匿名插槽、具名插槽和作用域插槽
1)匿名插槽
匿名插槽是最简单的一种,用于传递未命名内容给子组件。
示例代码:
<!-- ParentComponent.vue -->
<template>
<div>
<slot>This is default content</slot>
</div>
</template>
<!-- App.vue -->
<template>
<div>
<parent-component>
<p>This content will be inserted into the slot</p>
</parent-component>
</div>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: {
ParentComponent
}
};
</script>
2)具名插槽
具名插槽允许你定义多个插槽,并给每一个插槽起一个名称
示例代码:
<!-- ParentComponent.vue -->
<template>
<div>
<slot name="header">Default header content</slot>
<slot>This is default content</slot>
<slot name="footer">Default footer content</slot>
</div>
</template>
<!-- App.vue -->
<template>
<div>
<parent-component>
<template v-slot:header>
<h1>Custom Header</h1>
</template>
<p>This content will be the default slot content</p>
<template v-slot:footer>
<footer>Custom Footer</footer>
</template>
</parent-component>
</div>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: {
ParentComponent
}
};
</script>
3)作用域插槽
作用域插槽允许子组件向父组件传递数据
示例代码:
<!-- ChildComponent.vue -->
<template>
<div>
<slot :message="message">
{{ message }}
</slot>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from Child Component'
};
}
};
</script>
<!-- ParentComponent.vue -->
<template>
<div>
<child-component v-slot="{ message }">
<p>{{ message }}</p>
</child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>