vue和react中关于插槽详解

当我们在使用Vue或React构建组件时，经常会遇到需要给组件传递内容的情况。比如一个弹出框，需要在内容区域中传递不同的文本、表单或者其他组件作为content。这时候，我们可以使用插槽的概念来进行解决。

概述

插槽（Slot）是Vue和React中组件通信的一种技术，它允许我们在一个组件的模板中预留一定的位置，然后在使用该组件的父组件中，使用自定义的内容来填充这个位置。这使得我们能够在不同的组件中，同步复用一些通用的模板，这有助于减少重复性工作和提高代码的重用性。

Vue中的插槽

在Vue中，从2.x版本开始，我们可以使用<slot>元素来制定插槽。插槽可以在组件的模板中包含多个<slot>元素。我们可以使用name属性来给这些插槽取名字并标识。

在使用组件时，我们可以在组件标签中添加内容，并通过<slot></slot>标签把这个内容插入到组件模板中的指定位置。如果我们没有在组件标签中添加内容，组件默认会渲染模板中预先定义的插槽内容（这个时候，我们可以把<slot>标签包裹在一个默认内容中）。

<template>
  <div class="dialog">
    <div class="header">{{title}}</div>
    <div class="content">
      <!--内容区域-->
      <slot></slot>
    </div>
    <div class="footer">
      <button class="btn cancel" @click="$emit('close')">Cancel</button>
      <button class="btn confirm" @click="$emit('submit')">OK</button>
    </div>
  </div>
</template>

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

<style>
/* 样式 */
</style>

在这个例子中，我们定义了一个名为MyDialog的组件，为其声明了一个名为title的属性。在组件模板中，预留了一个名为<slot>的插槽，用于展示父组件传递的内容。

现在，我们可以在父组件中使用这个组件，并把需要展示的内容通过slot传递进去：

<template>
  <my-dialog title="Hello World">
    <!--自定义内容-->
    <div>Hello, this is my dialog!</div>
  </my-dialog>
</template>

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

export default {
  components: { MyDialog }
}
</script>

<style>
/* 样式 */
</style>

我们通过slot，在MyDialog组件的模板中尝试渲染了父组件中的自定义内容。

除了普通的插槽，Vue还有具名插槽和作用域插槽两种插槽方式。这里不再赘述，感兴趣的可以参考Vue官方文档。

React中的插槽

在React中，我们没有像Vue中的<slot>元素这样的技术。取而代之的是使用Props属性，一个React组件通过props属性接收包含Html代码片段的内容并渲染到自身的模板中。

import React from 'react';

const Dialog = (props) => {
  return (
    <div className="dialog">
      <div className="header">{props.title}</div>
      <div className="content">
        {props.children}
      </div>
      <div className="footer">
        <button className="btn cancel" onClick={props.onClose}>Cancel</button>
        <button className="btn confirm" onClick={props.onSubmit}>OK</button>
      </div>
    </div>
  )
}

export default Dialog;

在这个例子中，我们定义了一个名为Dialog的组件，为其声明了一个名为title的属性。在组件模板中，我们通过Props的children属性将来自父组件的内容传递到了模板中需要插入自定义内容的位置。

现在，我们可以在父组件中使用这个组件，并把需要展示的内容通过类似于Vue中的slot属性传递进去：

import React from 'react';
import Dialog from './Dialog.jsx';

const MyModal = () => {
  return (
    <Dialog title="Hello React">
      <div>Hello, this is my dialog!</div>
    </Dialog>
  )
}

export default MyModal;

我们通过Props.children，在Dialog组件的模板中尝试渲染了父组件中的自定义内容。

除了针对Props.children的传递方式之外，React还有一个Context技术，可以实现在组件树中跨级传递数据，这里不再赘述。感兴趣的可以参考React官方文档。

结束语

Vue和React中的插槽技术，大大增强了组件构建时的灵活性。当我们需要在组件模板中显示动态内容时，可以使用插槽技术，轻松地解决这个问题。