深入理解 Vue 中 slot 与 slot-scope 的具体使用

在 Vue 框架中，slot 是一种语法糖，它允许我们在一个组件的模板中，将子组件的内容插入到特定的位置。在使用 slot 时，我们可以为它提供名称，称之为“具名插槽”，也可以不提供名称，称之为“匿名插槽”。

在有一些使用场景下，我们还需要穿透到插槽内部的作用域，这时就可以用到 slot-scope。slot-scope 可以在插槽内部设置变量，将子组件的数据传递给父组件，或者处理子组件的事件。

下面我们将通过两个示例来详细讲解 slot 和 slot-scope 的使用。

示例一：使用具名插槽传递数据

假设我们有一个需求，需要在一个组件内嵌套另一个组件，并且将内部组件的数据传递到外部组件的模板中。我们可以使用具名插槽来实现此需求。

<!-- 内部组件 -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'InnerComponent',
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  }
}
</script>

<!-- 外部组件 -->
<template>
  <div>
    <h1>外部组件</h1>
    <slot name="inner"></slot>
  </div>
</template>

<script>
export default {
  name: 'OuterComponent',
}
</script>

通过将内部组件的标签和属性添加到外部组件的具名插槽中，并在外部组件的模板中使用相同的属性名，就可以轻松地将内部组件的数据传递到外部组件中。

<template>
  <div>
    <h1>外部组件</h1>
    <slot name="inner" :title="title" :content="content">
      <!-- 内部组件标签和属性 -->
      <InnerComponent title="标题" content="内容"></InnerComponent>
    </slot>
  </div>
</template>

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

export default {
  name: 'OuterComponent',
  components: {
    InnerComponent
  },
  data() {
    return {
      title: '',
      content: ''
    }
  },
  mounted() {
    // 获取内部组件的数据
    this.title = this.$refs.inner.title
    this.content = this.$refs.inner.content
  }
}
</script>

示例二：在插槽内部使用 slot-scope

假设我们有一个需求，需要将内部组件的事件处理程序绑定到外部组件的模板中。我们可以使用 slot-scope 来实现此需求。

<!-- 内部组件 -->
<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'InnerComponent',
  methods: {
    handleClick() {
      this.$emit('inner-click')
    }
  }
}
</script>

<!-- 外部组件 -->
<template>
  <div>
    <h1>外部组件</h1>
    <slot name="inner" slot-scope="data">
      <!-- 内部组件标签 -->
      <InnerComponent></InnerComponent>
      <!-- 通过 slot-scope 具名插槽传递事件处理程序 -->
      <button @click="data.handleClick">这里也可以点击我</button>
    </slot>
  </div>
</template>

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

export default {
  name: 'OuterComponent',
  components: {
    InnerComponent
  },
  methods: {
    handleInnerClick() {
      console.log('内部组件的点击事件被触发')
    }
  }
}
</script>

在外部组件的模板中，我们使用 slot-scope 来声明一个变量 data，这个变量可以在插槽内部使用。通过 data 可以访问内部组件的数据、方法等，例如上例中的 handleClick 方法。外部组件可以将 $emit 方法绑定到这个方法上，与内部组件进行交互。

参考资料

• Vue.js Slots 具名插槽和作用域插槽