Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 Slots

In Vue.js, slots are a powerful tool for creating reusable components. A slot is a placeholder inside a component that can be filled with markup or other components from the parent component. This allows you to create more flexible and reusable components.

Here's a basic tutorial on how to use slots in Vue 3.0:

Creating a component with a slot

Let's create a simple Card component that has a slot.

<!-- Card.vue -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
}
</style>

Here, the <slot></slot> tag is where the content from the parent will be inserted.

Using a component with a slot

Now, let's use the Card component in a parent component.

<!-- Parent.vue -->
<template>
  <Card>
    <h2>My Title</h2>
    <p>Some text...</p>
  </Card>
</template>

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

export default {
  components: {
    Card
  }
}
</script>

Here, the markup between the <Card> tags will replace the <slot></slot> in the Card component.

Named slots
Vue also allows you to use multiple slots in a component with different names. Let's add a named slot to our Card component.
```

<template>
  <div class="card">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
```
Now, you can specify which slot your content should go into by using the v-slot directive in the parent component.
```

<template>
  <Card>
    <template v-slot:header>
      <h2>My Title</h2>
    </template>
    <p>Some text...</p>
    <template v-slot:footer>
      <button>Click me</button>
    </template>
  </Card>
</template>
```
The markup inside the <template v-slot:header> tags will replace the <slot name="header"></slot> in the Card component, and the markup inside the <template v-slot:footer> tags will replace the <slot name="footer"></slot>.

Slots provide a way to create flexible and reusable components. They allow you to define a place in a component where you can inject any markup or other components.

Vue 3.0 Named Slots:

Named slots allow you to specify where the content should be inserted in the parent component.

Example code:

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

<!-- App.vue -->
<template>
  <parent-component>
    <template #header>
      <h1>Header Content</h1>
    </template>
    <p>Main Content</p>
  </parent-component>
</template>

Scoped Slots in Vue 3.0:

Scoped slots allow passing data from the parent to the slot content.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot :data="slotData"></slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <parent-component>
    <template #default="{ data }">
      <p>{{ data }}</p>
    </template>
  </parent-component>
</template>

Dynamic Slot Names in Vue 3.0:

Slot names can be dynamic based on component data.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot :name="dynamicSlotName"></slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <parent-component :dynamicSlotName="slotName">
    <template #header>
      <h1>Dynamic Header</h1>
    </template>
  </parent-component>
</template>

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

Slot Props in Vue 3.0:

Slot props allow passing data from the parent to the slot content using v-slot.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot :data="slotData"></slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <parent-component>
    <template v-slot="{ data }">
      <p>{{ data }}</p>
    </template>
  </parent-component>
</template>

Vue 3.0 Default Content in Slots:

Provide default content for a slot that will be used if no specific content is provided.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot>This is the default content</slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <parent-component></parent-component>
</template>

Vue 3.0 Slot Content Distribution:

Distribute slot content to specific named slots based on conditions.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
    <slot></slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <parent-component>
    <template #header>
      <h1>Header Content</h1>
    </template>
    <p>Main Content</p>
    <template #footer>
      <footer>Footer Content</footer>
    </template>
  </parent-component>
</template>

Slot-scope in Vue 3.0:

The slot-scope attribute is used for passing data from the parent component to the slot content.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot :data="slotData"></slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <parent-component>
    <template slot-scope="{ data }">
      <p>{{ data }}</p>
    </template>
  </parent-component>
</template>

Slot Fallback Content in Vue 3.0:

Provide fallback content that will be used if the slot is empty.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot>This is the default content</slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <parent-component>
    <!-- No content provided for the slot -->
  </parent-component>
</template>

Passing Data to Slots in Vue 3.0:

Data can be passed to slots using slot props or scoped slots.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot :data="slotData"></slot>
  </div>
</template>

<!-- App.vue -->
<template>
  <parent-component>
    <template v-slot="{ data }">
      <p>{{ data }}</p>
    </template>
  </parent-component>
</template>

Vue 3.0 Slot Change Events:

Emit events from the child component when slot content changes.

Example code:

<!-- ChildComponent.vue -->
<template>
  <div @slotchange="handleSlotChange">
    <slot></slot>
  </div>
</template>

<script>
export default {
  methods: {
    handleSlotChange() {
      console.log('Slot content changed');
    },
  },
};
</script>

Slot Props and Reactivity in Vue 3.0:

Slot props are reactive, allowing changes in the parent to reflect in the slot content.

Example code:

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot :data="slotData"></slot>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const slotData = ref('Initial data');

    setTimeout(() => {
      slotData.value = 'Updated data';
    }, 2000);

    return { slotData };
  },
};
</script>