面试题：Vue具名插槽的作用域插槽在复杂列表场景中的优化应用

1. 子组件（商品列表项组件）

<template>
  <div class="product-item">
    <!-- 展示基本信息 -->
    <p>{{ product.baseInfo }}</p>
    <p>价格: {{ product.price }}</p>
    <p>库存: {{ product.stock }}</p>
    <!-- 具名插槽，通过作用域插槽传递商品数据 -->
    <slot name="actions" :product="product"></slot>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

2. 父组件使用子组件并处理作用域插槽传递的数据

<template>
  <div>
    <product-item v-for="(product, index) in products" :key="index" :product="product">
      <template v-slot:actions="slotProps">
        <!-- 根据用户权限处理展示逻辑 -->
        <button v-if="user.hasEditPermission" @click="editProduct(slotProps.product)">编辑</button>
        <button v-if="user.hasDeletePermission" @click="deleteProduct(slotProps.product)">删除</button>
      </template>
    </product-item>
  </div>
</template>

<script>
import ProductItem from './ProductItem.vue'

export default {
  components: {
    ProductItem
  },
  data() {
    return {
      products: [
        { baseInfo: '商品1信息', price: 100, stock: 10 },
        { baseInfo: '商品2信息', price: 200, stock: 5 }
      ],
      user: {
        hasEditPermission: true,
        hasDeletePermission: false
      }
    }
  },
  methods: {
    editProduct(product) {
      console.log('编辑商品', product);
    },
    deleteProduct(product) {
      console.log('删除商品', product);
    }
  }
}
</script>

说明

作用域插槽传递数据：在子组件的具名插槽<slot name="actions" :product="product"></slot>中，通过:product="product"将商品数据product传递出来，这个product是子组件通过props接收的数据。
父组件展示逻辑处理：在父组件中使用v-slot:actions="slotProps"接收子组件传递过来的数据，slotProps是一个对象，其属性product就是子组件传递的商品数据。然后根据user对象中的权限信息，使用v-if指令来决定是否展示编辑和删除按钮，从而实现不同的展示逻辑处理。

面试题：Vue具名插槽的作用域插槽在复杂列表场景中的优化应用

知识考点

面试题答案

1. 子组件（商品列表项组件）

2. 父组件使用子组件并处理作用域插槽传递的数据

说明