MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue插槽 插槽优先级与默认内容的处理技巧

2021-11-218.0k 阅读

Vue插槽基础概念

在Vue.js中，插槽（Slots）是一种强大的机制，用于在组件间传递内容。它允许我们在父组件中定义一部分内容，然后将其插入到子组件的指定位置。简单来说，插槽就像是子组件暴露给父组件的一个“占位符”，父组件可以把自己的HTML或组件片段填充到这个占位符中。

先来看一个简单的例子，假设我们有一个MyButton组件：

<template>
  <button>
    <!-- 这里是插槽位置 -->
    <slot></slot>
  </button>
</template>

在父组件中使用MyButton组件时：

<template>
  <div>
    <MyButton>
      点击我
    </MyButton>
  </div>
</template>

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

在上述代码中，<MyButton>标签之间的“点击我”文本，就会被插入到MyButton组件<slot>的位置，最终渲染出来的HTML类似于：

<button>点击我</button>

这种简单的插槽也被称为默认插槽（Default Slot），它为组件的定制化提供了基本的能力。

具名插槽

在实际开发中，一个组件可能需要多个插槽来接收不同位置或用途的内容。这时候就需要用到具名插槽（Named Slots）。具名插槽允许我们为插槽指定一个名字，以便在父组件中更精确地控制内容插入的位置。

假设我们有一个MyCard组件，它有一个标题区域和一个内容区域，对应的模板如下：

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

在这个MyCard组件中，我们定义了一个名为header的具名插槽和一个默认插槽。在父组件中使用MyCard组件时：

<template>
  <div>
    <MyCard>
      <template v-slot:header>
        卡片标题
      </template>
      <p>这是卡片的正文内容。</p>
    </MyCard>
  </div>
</template>

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

在上述代码中，通过v-slot:header指令，我们将“卡片标题”插入到了MyCard组件的header插槽中，而<p>标签内的文本则插入到了默认插槽。这里v-slot是Vue 2.6.0引入的新语法，在这之前可以使用slot="header"的写法。

作用域插槽

作用域插槽（Scoped Slots）是插槽机制中更为高级的部分。它允许子组件向父组件暴露数据，父组件可以根据这些数据来动态地渲染插槽内容。这在一些通用组件，如列表组件或表格组件中非常有用。

假设我们有一个MyList组件，它用于展示一个列表，并且希望父组件能够自定义列表项的渲染方式。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: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  }
}
</script>

在上述代码中，<slot>标签通过:item="item"将当前列表项item暴露给父组件。在父组件中使用MyList组件时：

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

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

在父组件中，通过v-slot:default="slotProps"接收子组件暴露的item数据，并在插槽内容中根据这些数据进行自定义渲染。这里v-slot:default中的default表示默认插槽，如果是具名插槽，这里需要替换为具名插槽的名字。

插槽优先级

默认插槽与具名插槽的优先级

在Vue中，默认插槽和具名插槽的优先级是由它们在组件模板中的定义和使用方式决定的。当父组件为子组件提供内容时，具名插槽的内容会优先于默认插槽填充到对应的位置。

回到之前的MyCard组件例子，当父组件这样使用时：

<template>
  <div>
    <MyCard>
      <template v-slot:header>
        新的标题
      </template>
      <p>默认内容</p>
      <template v-slot:default>
        替换默认内容
      </template>
    </MyCard>
  </div>
</template>

在这个例子中，header具名插槽的“新的标题”会填充到MyCard组件中name="header"的插槽位置。而对于默认插槽，v-slot:default指定的“替换默认内容”会优先于<p>默认内容</p>填充到默认插槽位置。

这是因为v-slot指令明确指定了内容要插入到哪个插槽，它的优先级高于直接写在组件标签内的内容。

作用域插槽优先级

作用域插槽在优先级方面，和默认插槽、具名插槽并没有本质的优先级区别，但由于它的数据传递特性，会在渲染逻辑上有不同的表现。

当使用作用域插槽时，父组件依赖子组件暴露的数据来渲染插槽内容。在组件渲染过程中，首先子组件会初始化数据并将数据通过插槽暴露给父组件，然后父组件根据这些数据渲染插槽内容。

例如在MyList组件的例子中，MyList组件先初始化items数据，然后在渲染<li>时，将每个item通过插槽暴露给父组件。父组件根据接收到的slotProps.item数据来渲染每个列表项的插槽内容。

在这种情况下，优先级体现在数据的传递和依赖关系上，子组件的数据初始化和暴露是父组件插槽内容渲染的前提。

默认内容的处理技巧

默认插槽的默认内容

在定义默认插槽时，我们可以在<slot>标签内提供默认内容。当父组件没有为该插槽提供内容时，这些默认内容就会被渲染出来。

比如我们修改之前的MyButton组件：

<template>
  <button>
    <slot>点击我</slot>
  </button>
</template>

在这个组件中，<slot>标签内的“点击我”就是默认内容。当父组件这样使用时：

<template>
  <div>
    <MyButton></MyButton>
  </div>
</template>

由于父组件没有为MyButton组件的插槽提供内容，所以渲染出来的按钮文本就是“点击我”。而当父组件这样使用时：

<template>
  <div>
    <MyButton>提交</MyButton>
  </div>
</template>

父组件提供的“提交”内容会覆盖默认内容，按钮文本就变为“提交”。

具名插槽的默认内容

具名插槽同样可以有默认内容。我们修改MyCard组件，为header具名插槽添加默认内容：

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">默认标题</slot>
    </div>
    <div class="card-body">
      <slot>默认正文</slot>
    </div>
  </div>
</template>

当父组件这样使用时：

<template>
  <div>
    <MyCard>
      <p>自定义正文</p>
    </MyCard>
  </div>
</template>

由于父组件没有为header具名插槽提供内容，所以MyCard组件的标题区域会显示“默认标题”，而正文区域会显示父组件提供的“自定义正文”。

根据条件渲染默认内容

有时候，我们需要根据一些条件来决定是否渲染默认内容。可以在子组件中通过计算属性或方法来实现。

例如，我们有一个MyMessage组件，它根据一个isNew属性来决定显示新消息提示还是默认的消息内容：

<template>
  <div>
    <slot v-if="isNew">
      <span class="new-message">新消息！</span>
    </slot>
    <slot v-else>
      <span class="old-message">查看旧消息</span>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isNew: true
    }
  }
}
</script>

在这个例子中，如果isNew为true，并且父组件没有为插槽提供内容，就会显示“新消息！”；如果isNew为false，则会显示“查看旧消息”。当父组件为插槽提供内容时，会优先显示父组件的内容。

动态切换默认内容

我们还可以通过动态改变数据来动态切换默认内容。例如，我们有一个MyTab组件，它有两个标签页，根据当前选中的标签来切换默认显示的内容。

<template>
  <div>
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)">{{ tab.title }}</li>
    </ul>
    <div>
      <slot v-if="selectedTab === 0">
        <p>这是第一个标签页的默认内容。</p>
      </slot>
      <slot v-if="selectedTab === 1">
        <p>这是第二个标签页的默认内容。</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: '标签页1', content: '内容1' },
        { title: '标签页2', content: '内容2' }
      ],
      selectedTab: 0
    }
  },
  methods: {
    selectTab(index) {
      this.selectedTab = index;
    }
  }
}
</script>

在这个组件中，当点击不同的标签时，selectedTab会改变，从而动态切换显示的默认内容。如果父组件为插槽提供了内容，同样会优先显示父组件的内容。

结合作用域插槽处理默认内容

当作用域插槽和默认内容结合使用时，我们可以根据子组件暴露的数据来决定是否显示默认内容。

例如，我们有一个MyProduct组件，它展示产品信息，并根据产品是否有库存来显示不同的默认内容：

<template>
  <div>
    <div class="product-info">
      <slot :product="product">
        <p v-if="product.inStock">库存充足，立即购买！</p>
        <p v-if="!product.inStock">该产品已售罄。</p>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        name: '示例产品',
        inStock: true
      }
    }
  }
}
</script>

在这个例子中，子组件通过:product="product"将product数据暴露给父组件。如果父组件没有为插槽提供内容，会根据product.inStock的值显示相应的默认内容。如果父组件提供了内容，会优先显示父组件的内容，并且父组件可以根据接收到的product数据进行更复杂的渲染逻辑。

通过以上对Vue插槽优先级与默认内容处理技巧的深入探讨，我们能够更好地利用插槽机制，构建出更加灵活和可复用的组件，提升前端开发的效率和质量。在实际项目中，根据不同的需求合理运用这些技巧，可以让组件的交互和展示更加符合业务要求。