vue学习-11插槽

Vue.js的插槽是一种能够让你在父组件中将子组件的内容进行分发和重用的机制。通过插槽，你可以在父组件中定义子组件的模板结构，使得子组件可以向父组件传递内容，并根据父组件的需求来显示。这种机制让组件更灵活和可复用。

有默认插槽和具名插槽两种类型。默认插槽用于传递未命名的内容，而具名插槽则可以传递特定名称的内容，方便在父组件中精确控制。

在父组件中，你可以使用<slot>元素来标识插槽的位置，而在子组件中，你可以使用<slot>元素来传递内容到对应的插槽位置。

例如，在父组件中：

html 复制代码

<template>
  <div>
    <slot></slot> <!-- 默认插槽 -->
    <slot name="header"></slot> <!-- 具名插槽 -->
  </div>
</template>

在子组件中：

html 复制代码

<template>
  <div>
    <slot></slot> <!-- 默认插槽的内容 -->
    <slot name="header">Default Header</slot> <!-- 具名插槽的内容 -->
  </div>
</template>

通过这种方式，你可以向子组件传递内容，并决定如何在父组件中展示这些内容。

默认插槽

html 复制代码

<template>
    <div class="content">
        <Category title="美食">
            <img src="../public/meishi.png" alt="">
        </Category>
        <Category title="游戏">
            <ul>
                <li v-for="(g,index) in games" :key="index">
                    {{g}}
                </li>
            </ul>
        </Category>
        <Category title="电影">
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        </Category>
    </div>
</template>

<script>
    import Category from './components/Category.vue'
    export default {
        name:'App',
        components:{
            Category
        },
        data() {
            return {
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','劲舞团','超级玛莉亚'],
                films:['《肖生克的救赎》','《阿甘正传》','《你好,李焕英》','《长津湖》']
            }
        },
    }
</script>

<style>
    .content{
        display: flex;
        justify-content: space-around;
    }
    video{
        width: 100%;
    }
</style>

html 复制代码

//Category.vue
<template>
    <div class="category">
        <h3>{{title}}</h3>
        <!-- <ul>
            <li v-for="(item,index) in listData" :key="index">
                {{item}}
            </li>
        </ul> -->
        <!-- 定义一个插槽(挖个坑，等待组件的使用者进行填充) -->
        <slot>
            这是我的默认值，组件的使用者没有填充就显示我的数据.
        </slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title','listData']
    }
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    img{
        width: 100%;
    }
</style>

具名插槽

具名插槽（Named Slots）是Vue.js中的一项强大功能，它允许你在子组件中定义多个具有特定名称的插槽，以便在父组件中更灵活地控制子组件的内容。具名插槽适用于以下情况：

多个插槽点：当你的子组件需要在不同位置接受不同内容时，具名插槽非常有用。你可以为每个插槽点定义一个名称，然后在父组件中选择性地传递内容。

可复用性：具名插槽使得子组件更加通用和可复用，因为父组件可以自由地填充不同名称的插槽，而不需要修改子组件的代码。

可读性：通过给插槽起有意义的名称，代码变得更具可读性，因为你可以清晰地了解父组件中每个插槽的用途。

在子组件中定义具名插槽的方式如下：

html 复制代码

<template>
  <div>
    <slot name="header"></slot> <!-- 具名插槽，名称为 "header" -->
    <slot name="content"></slot> <!-- 具名插槽，名称为 "content" -->
  </div>
</template>

在父组件中使用具名插槽的方式如下：

html 复制代码

<template>
  <custom-component>
    <template v-slot:header>
      <!-- 这里是放置在 "header" 插槽中的内容 -->
      <h1>这是一个标题</h1>
    </template>
    
    <template v-slot:content>
      <!-- 这里是放置在 "content" 插槽中的内容 -->
      <p>这是一些内容。</p>
    </template>
  </custom-component>
</template>

通过这种方式，你可以将不同的内容传递给子组件的不同具名插槽，实现更高度定制和可控制的组件行为。

作用域插槽

作用域插槽（Scoped Slots）是Vue.js中的一项高级功能，它允许子组件向父组件传递数据，以便在父组件中更灵活地渲染内容。作用域插槽通常用于在子组件中包装数据，并将数据传递到父组件，从而让父组件能够更具自定义性地渲染内容。

在子组件中，你可以定义一个带有数据的插槽，然后在父组件中使用这个插槽，并访问子组件传递的数据。

下面是一个使用作用域插槽的示例：

在子组件中定义作用域插槽：

html 复制代码

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: "Alice", age: 30 }
    };
  }
};
</script>

在父组件中使用作用域插槽，并访问子组件传递的数据：

html 复制代码

<template>
  <custom-component>
    <template v-slot="slotProps">
      <!-- 使用作用域插槽传递的数据 -->
      <p>Name: {{ slotProps.user.name }}</p>
      <p>Age: {{ slotProps.user.age }}</p>
    </template>
  </custom-component>
</template>

在这个示例中，子组件通过作用域插槽传递了一个名为user的对象到父组件中，父组件使用v-slot指令来接收这个数据，并在模板中访问它。

作用域插槽使得子组件可以将数据传递给父组件，然后由父组件来渲染内容，这在创建高度可定制的组件时非常有用。