template slot-scope

As an AI language model, I am not capable of designing templates, but I can describe what a template slot-scope is in Vue.js.

In Vue.js, a template slot-scope is a feature that allows you to pass data from a parent component to a child component through a scoped slot. A scoped slot is a special type of slot that allows the child component to access the data passed down from the parent component.

The slot-scope attribute is used to define the name of the variable that will be used to access the data in the child component. For example, if you define a scoped slot with the name "item" in the parent component, you can access the data using the "item" variable in the child component.

Here's an example of how to use a template slot-scope in Vue.js:

Parent component:

<template>
  <div>
    <child-component>
      <template slot-scope="data">
        <span>{{ data.title }}</span>
        <p>{{ data.description }}</p>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },

  data() {
    return {
      items: [
        { title: "Item 1", description: "This is item 1" },
        { title: "Item 2", description: "This is item 2" },
        { title: "Item 3", description: "This is item 3" },
      ],
    };
  },
};
</script>

Child component:

<template>
  <div>
    <slot :title="items[0].title" :description="items[0].description"></slot>
  </div>
</template>

In this example, the parent component passes data to the child component using a scoped slot. The child component accesses the data using the "data" variable defined in the slot-scope attribute.