vue之插槽（slot）

插槽（slot）是 Vue.js 提供的一种机制，用于在组件中插入内容。插槽允许你在父组件中定义内容，并将其传递到子组件中进行渲染。

插槽的基本概念

插槽可以分为三种类型：

1. 默认插槽：没有名称的插槽。
2. 具名插槽：具有名称的插槽。
3. 作用域插槽：可以接收子组件传递的数据的插槽。

具名插槽

<template #help> 是具名插槽的一种简写形式。具名插槽允许你在子组件中定义多个插槽，并在父组件中通过名称来插入内容。

语法

假设你有一个子组件 MyComponent，它定义了一个具名插槽 help：

子组件 (MyComponent.vue)

<template>
  <div>
    <label>{{ label }}</label>
    <input :name="name" />
    <slot name="help"></slot>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    name: String
  }
};
</script>

父组件

在父组件中，你可以使用 <template v-slot:help> 或其简写形式 <template #help> 来插入内容：

<template>
  <MyComponent label="测试机器IP" name="test_ips">
    <template #help>
      <span style="color: red;">若无所需测试机器IP,请输入IP后按Enter键添加(例如: x)</span>
    </template>
  </MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

简写形式

<template #help> 是 <template v-slot:help> 的简写形式。Vue.js 2.6.0+ 引入了这种简写形式，使得代码更加简洁。

子组件 (MyComponent.vue)

<template>
  <div>
    <label>{{ label }}</label>
    <input :name="name" />
    <slot name="help"></slot>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    name: String
  }
};
</script>

父组件

<template>
  <div>
    <MyComponent label="测试机器IP" name="test_ips">
      <template #help>
        <span style="color: red;">若无所需测试机器IP,请输入IP后按Enter键添加(例如: x)</span>
      </template>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

默认插槽

默认插槽是没有名称的插槽，通常用于在子组件中插入默认内容。如果父组件没有提供内容，子组件会显示默认内容。

子组件 (MyComponent.vue)

<template>
  <div>
    <label>{{ label }}</label>
    <input :name="name" />
    <slot>默认帮助文本</slot>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    name: String
  }
};
</script>

在这个例子中，<slot> 标签定义了一个默认插槽。如果父组件没有提供内容，插槽会显示 “默认帮助文本”。

父组件

<template>
  <div>
    <MyComponent label="测试机器IP" name="test_ips">
      <span style="color: red;">若无所需测试机器IP,请输入IP后按Enter键添加(例如: x)</span>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

在这个例子中，父组件提供了内容，因此插槽会显示父组件提供的内容，而不是默认内容。

作用域插槽

作用域插槽（Scoped Slots）允许子组件将数据传递给插槽内容。父组件可以使用这些数据来动态渲染内容。

子组件 (MyComponent.vue)

<template>
  <div>
    <label>{{ label }}</label>
    <input :name="name" />
    <slot :help-text="helpText"></slot>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    name: String
  },
  data() {
    return {
      helpText: '若无所需测试机器IP,请输入IP后按Enter键添加(例如: x)'
    };
  }
};
</script>

在这个例子中，子组件通过 slot 标签的 :help-text 属性将 helpText 数据传递给插槽内容。

父组件

<template>
  <div>
    <MyComponent label="测试机器IP" name="test_ips">
      <template v-slot:default="slotProps">
        <span style="color: red;">{{ slotProps.helpText }}</span>
      </template>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

在这个例子中，父组件使用 v-slot:default 指令接收子组件传递的数据，并通过 slotProps 对象访问 helpText。