Vue3插槽(slot)使用方法详解

Vue3中插槽（slot）是指在组件内部定义好一些模板代码，并在组件使用时通过插槽嵌入到组件内部的技术。本文将详细讲解Vue3插槽的使用方法。

插槽的基本概念

插槽是Vue3中一个重要的特性，它允许组件与它的子组件在编译期间动态传递内容。在Vue2中，插槽分为具名插槽和匿名插槽两种，但在Vue3中只有一种插槽。一个基本的插槽包括两个部分：插槽定义和插槽内容。

插槽定义是在组件模板的 <slot> 元素中定义的，如下所示：

<template>
  <div>
    <slot></slot>
  </div>
</template>

插槽内容在组件使用时传入，如下所示：

<template>
  <my-component>
    <p>这是插槽内容。</p>
  </my-component>
</template>

这样，<p>这是插槽内容。</p> 就会被插入到 <div><slot></slot></div> 中的 slot 标签内。

父组件向子组件传递数据

假设我们有一个 blog-post 组件和一个 comment 组件，需要在 blog-post 中使用 comment 组件，并通过 blog-post 组件向 comment 组件传递数据。代码如下：

<!-- BlogPost.vue -->
<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    <CommentList :comments="comments"></CommentList>
  </div>
</template>

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

export default {
  name: 'BlogPost',
  components: {
    CommentList
  },
  props: ['title', 'content', 'comments']
}
</script>

<!-- CommentList.vue -->
<template>
  <div>
    <h3>评论列表</h3>
    <ul>
      <li v-for="comment in comments" :key="comment.id">
        {{ comment.content }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CommentList',
  props: ['comments']
}
</script>

在 BlogPost.vue 中，我们向 CommentList 传递了一个名为 comments 的 props。然后，我们可以在 CommentList.vue 中通过 {{ comments }} 访问这个 props。

子组件向父组件传递数据

我们同样可以使用插槽来实现子组件向父组件传递数据的需求。假设我们有一个 my-button 组件，需要在点击按钮时触发父组件中的 onClick 方法，并将按钮的文本传递给父组件。代码如下：

<!-- Parent.vue -->
<template>
  <div>
    <my-button @click="onClick">
      点我
    </my-button>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  name: 'Parent',
  components: {
    MyButton
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    onClick(message) {
      this.message = message
    }
  }
}
</script>

<!-- MyButton.vue -->
<template>
  <button @click="onClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  methods: {
    onClick() {
      this.$emit('click', this.$slots.default[0].text)
    }
  }
}
</script>

在 Parent.vue 中，我们传递了一个 onClick 方法给 my-button 组件，并通过插槽将 my-button 的文本传递给父组件。在 my-button 组件中，我们使用 $emit 触发了 click 事件，并将插槽内文本传递给父组件。

总结

Vue3插槽是一个非常有用和强大的特性，它可以帮助我们快速构建高复用性的组件。在实际开发中，我们应该根据实际情况合理地使用插槽，灵活地处理组件之间的交互。