【前端】【vue】vue2/3，nuxt的插槽使用详解

插槽在Vue2、Vue3和不同版本Nuxt中的使用

Vue2中的插槽

基础插槽

在Vue2中，基础插槽允许在组件的模板中定义一个占位符，然后在使用组件时插入自定义内容。例如，创建一个简单的MyBox组件：

<template>
  <div class="box">
    <slot></slot>
  </div>
</template>

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

<style scoped>
.box {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

使用时：

<template>
  <div>
    <MyBox>
      <p>这是插入到MyBox组件插槽中的内容</p>
    </MyBox>
  </div>
</template>

<script>
import MyBox from './MyBox.vue';
export default {
  components: {
    MyBox
  }
}
</script>

基础插槽本身不涉及数据传递，主要用于简单的内容插入。

具名插槽

具名插槽允许在一个组件中定义多个插槽，并通过名称来区分。例如：

<template>
  <div class="layout">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

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

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
}
</style>

使用时：

<template>
  <div>
    <MyLayout>
      <template v-slot:header>
        <h1>页面标题</h1>
      </template>
      <p>页面主体内容</p>
      <template v-slot:footer>
        <p>版权所有 &copy; 2024</p>
      </template>
    </MyLayout>
  </div>
</template>

<script>
import MyLayout from './MyLayout.vue';
export default {
  components: {
    MyLayout
  }
}
</script>

具名插槽同样主要用于内容的组织，通常不直接传递数据，不过可以结合其他Vue特性，如props来间接实现数据相关的展示。

作用域插槽 - 数据传递

作用域插槽允许子组件向插槽传递数据。比如有一个展示用户列表的UserList组件，需要在列表项中展示用户的基本信息和自定义操作：

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <slot :user="user">
        <span>{{ user.name }} - {{ user.age }}</span>
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    };
  }
}
</script>

使用时：

<template>
  <div>
    <UserList>
      <template v-slot:default="slotProps">
        <span>{{ slotProps.user.name }} - {{ slotProps.user.age }}</span>
        <button @click="handleClick(slotProps.user)">操作</button>
      </template>
    </UserList>
  </div>
</template>

<script>
import UserList from './UserList.vue';
export default {
  components: {
    UserList
  },
  methods: {
    handleClick(user) {
      console.log(`对用户${user.name}进行操作`);
    }
  }
}
</script>

这里子组件UserList通过slot标签的属性:user="user"将用户数据传递给插槽，父组件在使用插槽时，通过v-slot:default="slotProps"接收数据，slotProps是一个对象，包含了子组件传递过来的user数据。

Vue3中的插槽

Vue3在插槽的使用上基本延续了Vue2的语法，但在一些细节上有所改进。

作用域插槽 - 数据传递

在Vue3中，使用v-slot指令更加简洁。例如，创建一个MyList组件展示商品列表：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item">{{ item.name }}</slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果', price: 5 },
        { id: 2, name: '香蕉', price: 3 }
      ]
    };
  }
}
</script>

使用时：

<template>
  <div>
    <MyList>
      <template v-slot="{ item }">
        <span>{{ item.name }} - 价格: {{ item.price }}</span>
      </template>
    </MyList>
  </div>
</template>

<script>
import MyList from './MyList.vue';
export default {
  components: {
    MyList
  }
}
</script>

这里v-slot后面接一个对象解构，直接获取子组件传递过来的数据item，相比Vue2更加简洁直观。同时，在Vue3中，还可以使用v-slot配合动态参数，实现更灵活的数据传递和插槽使用。

Nuxt中的插槽

Nuxt2

在Nuxt2中，插槽被广泛应用于页面布局和组件中。例如，在默认的layouts/default.vue中：

<template>
  <div>
    <nuxt-head></nuxt-head>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <nuxt></nuxt>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

在页面中使用时：

<template>
  <div>
    <template v-slot:header>
      <h1>我的页面标题</h1>
    </template>
    <p>页面内容</p>
    <template v-slot:footer>
      <p>页面底部信息</p>
    </template>
  </div>
</template>

对于数据传递，Nuxt2可以在页面组件中通过this.$root.$data等方式访问全局数据，然后在插槽内容中展示。例如，在layouts/default.vue中定义一个全局的网站名称数据，在header插槽中展示：

<template>
  <div>
    <nuxt-head></nuxt-head>
    <header>
      <slot name="header">{{ $root.$data.siteName }}</slot>
    </header>
    <main>
      <nuxt></nuxt>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      siteName: '我的网站'
    };
  }
}
</script>

在页面中使用时：

<template>
  <div>
    <template v-slot:header>
      <h1>{{ $root.$data.siteName }} - 页面标题</h1>
    </template>
    <p>页面内容</p>
    <template v-slot:footer>
      <p>页面底部信息</p>
    </template>
  </div>
</template>

Nuxt3

Nuxt3基于Vue3，插槽的使用更加简洁和强大。例如，在layouts/default.vue中：

<template>
  <div>
    <Head />
    <header>
      <slot name="header" />
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <slot name="footer" />
    </footer>
  </div>
</template>

在页面中使用：

<template>
  <div>
    <template #header>
      <h1>Nuxt3页面标题</h1>
    </template>
    <p>Nuxt3页面内容</p>
    <template #footer>
      <p>Nuxt3页面底部</p>
    </template>
  </div>
</template>

在数据传递方面，Nuxt3可以利用组合式API中的useState等函数来共享数据。比如创建一个共享的用户登录状态数据，在header插槽中根据登录状态展示不同内容：

<template>
  <div>
    <Head />
    <header>
      <slot name="header">
        <template v-if="isLoggedIn">
          <span>欢迎，{{ user.name }}</span>
        </template>
        <template v-else>
          <a href="/login">登录</a>
        </template>
      </slot>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <slot name="footer" />
    </footer>
  </div>
</template>

<script setup>
import { useState } from '#imports';
const { state: user, isLoggedIn } = useState('user', () => ({
  name: '',
  loggedIn: false
}));
</script>

在页面中使用时：

<template>
  <div>
    <template #header>
      <!-- 这里可以根据需求覆盖默认的header插槽内容 -->
    </template>
    <p>Nuxt3页面内容</p>
    <template #footer>
      <p>Nuxt3页面底部</p>
    </template>
  </div>
</template>

总结

插槽在Vue2、Vue3以及不同版本的Nuxt中都是非常重要的特性，不仅能实现内容的灵活插入，还能通过作用域插槽等方式实现数据的传递。通过合理使用插槽及其数据传递功能，可以提高组件的复用性和灵活性，构建出更加复杂和高效的应用程序。无论是基础插槽、具名插槽还是作用域插槽，都在不同场景下发挥着关键作用，开发者需要根据具体需求选择合适的插槽使用方式和数据传递策略。