When building reusable components in Vue.js, sometimes it is necessary to pass content from the parent component to the child component. Vue's slot mechanism provides a flexible way to implement this inter-component communication.
Slots allow you to write the content of a child component in a parent component, which is then passed to the child component for rendering. This way, you can define some templates with a fixed structure inside the child component, while retaining some variable content that can be determined by the parent component.
There are two types of slots in Vue: named slots and default slots.
1. Default Slot:
The default slot is the simplest kind of slot, which allows the parent component to pass arbitrary content to the child component. Use the `<slot></slot>` tag in the child component to indicate the position of the default slot. The content in the parent component will be rendered to this location.
The sample code is as follows:
<!-- 子组件 MyComponent.vue -->
<template>
<div>
<h2>子组件标题</h2>
<slot></slot>
</div>
</template>
<!-- 父组件 App.vue -->
<template>
<div>
<my-component>
<p>这是父组件中的内容。</p>
</my-component>
</div>
</template>
In the example above, `<p>This is the content in the parent component. </p>` will be rendered to the position where `<slot></slot>` is located.
2. Named Slot:
Named slots allow you to define multiple slots in a subcomponent and differentiate them by different names. Use `<template v-slot:slotName></template>` in the parent component to provide content for named slots. Use `<slot name="slotName"></slot>` in the child component to indicate the position of the named slot.
The sample code is as follows:
<!-- 子组件 MyComponent.vue -->
<template>
<div>
<h2>子组件标题</h2>
<slot name="content"></slot>
<slot name="footer"></slot>
</div>
</template>
<!-- 父组件 App.vue -->
<template>
<div>
<my-component>
<template v-slot:content>
<p>这是父组件中的内容。</p>
</template>
<template v-slot:footer>
<p>这是父组件中的页脚。</p>
</template>
</my-component>
</div>
</template>
In the above example, content is provided for named slots via `<template v-slot:content></template>` and `<template v-slot:footer></template>`. The content in the parent component will be
Renders to the corresponding named slot position.
Slots also support some advanced usages, such as scoped slots (Scoped Slot) and default values of scoped slots, which further enhance the flexibility and reusability of slots. By using slots, you can better split components into smaller, reusable parts, making your code cleaner and easier to maintain.
When using slots, you can also pass data to the slot content in child components. This can be achieved through scoped slots (Scoped Slot). Scoped slots allow data to be passed from a parent component to a child component's slot for further processing or rendering in the child component.
Scoped slots are defined using the `name` attribute of the `<slot>` element and specified in the parent component using `<template v-slot:slotName="slotProps"></template>` , and pass the data to the child component.
The sample code is as follows:
<!-- 子组件 MyComponent.vue -->
<template>
<div>
<h2>子组件标题</h2>
<slot name="content" :data="slotData"></slot>
</div>
</template>
<!-- 父组件 App.vue -->
<template>
<div>
<my-component>
<template v-slot:content="slotProps">
<p>{
{ slotProps.data }}</p>
</template>
</my-component>
</div>
</template>
In the above example, the parent component passes the data `slotData` to the scoped slot `content` via `:data="slotData"`. Subcomponents can access the passed data through `slotProps` and use it in the slot content.
In addition to passing data, scoped slots allow default values for named slots to be used in parent components. The default value ensures that even if the parent component does not provide the slot content, the child component can still display the default content.
The sample code is as follows:
<!-- 子组件 MyComponent.vue -->
<template>
<div>
<h2>子组件标题</h2>
<slot name="content">
<p>默认内容</p>
</slot>
</div>
</template>
<!-- 父组件 App.vue -->
<template>
<div>
<my-component>
<template v-slot:content>
<p>替代内容</p>
</template>
</my-component>
</div>
</template>
In the above example, if the parent component does not provide slot content, the child component will display the default content `<p>default content</p>`. If the parent component provides slot content, the child component will display the content provided by the parent component.
Through the flexibility and functionality of slots, Vue.js provides a powerful way to build reusable and highly flexible components, making the communication between parent and child components easier and more controllable.