vue插槽（一）

插槽概述

插槽是一种用于组件内容分发的机制。通过在组件模板中定义插槽，我们可以在使用该组件时，向插槽中插入内容。这样，组件的部分内容可以由父组件决定，从而实现更高级的组件复用和灵活性。

基本插槽

Vue中的插槽分为默认插槽和具名插槽。默认插槽是组件模板中没有指定名称的插槽，而具名插槽则是在模板中使用<slot>元素，并指定名称的插槽。

下面是一个示例，展示了如何在组件中定义和使用默认插槽：

代码语言：javascript复制

<template>
  <div>
    <h1>Parent Component</h1>
    <slot></slot>
  </div>
</template>

在上面的示例中，我们在组件模板中使用了<slot></slot>元素，它表示默认插槽。当使用该组件时，可以在<parent-component>标签中插入内容，该内容将替换掉<slot></slot>元素。

代码语言：javascript复制

<template>
  <div>
    <h2>Child Component</h2>
    <slot></slot>
  </div>
</template>

在上面的示例中，我们创建了一个子组件，也使用了<slot></slot>元素。同样，当使用该子组件时，可以在<child-component>标签中插入内容，替换掉<slot></slot>元素。

使用示例：

代码语言：javascript复制

<template>
  <div>
    <parent-component>
      <p>This is the content of the default slot.</p>
    </parent-component>

    <child-component>
      <button>Click me!</button>
    </child-component>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ParentComponent,
    ChildComponent
  }
};
</script>

在上面的示例中，我们在父组件和子组件中分别插入了内容。父组件插入了一个<p>元素作为默认插槽的内容，而子组件插入了一个<button>元素作为默认插槽的内容。

vue.js

0 人点赞