安装 element-ui

npm install element-ui --save ---force
 

main.js 导入

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);

new Vue({ el: '#app', render: h => h(App) });

创建一个插槽组件

• 具名插槽 (Named Slots)：允许你在组件中定义多个插槽，并为它们命名。在上面的示例中，header 是一个具名插槽。

• 默认插槽 (Default Slot)：如果没有提供具名插槽，插入的内容会放入默认插槽。

<!-- BaseCard.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseCard'
}
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
}
.card-header {
  font-size: 1.25em;
  margin-bottom: 10px;
}
.card-body {
  font-size: 1em;
}
</style>

使用插槽组件

<!-- App.vue -->
<template>
  <div>
    <BaseCard>
      <template v-slot:header>
        <h2>Card Title</h2>
      </template>
      <p>This is the card content.</p>
    </BaseCard>
  </div>
</template>

<script>
import BaseCard from './components/BaseCard.vue'

export default {
  name: 'App',
  components: {
    BaseCard
  }
}
</script>

作用域插槽：

组件：

<!-- BaseCard.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header" :title="headerTitle"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseCard',
  data() {
    return {
      headerTitle: 'Default Title'
    }
  }
}
</script>

使用：

<!-- ParentComponent.vue -->
<template>
  <div>
    <BaseCard>
      <template v-slot:header="slotProps">
        <h2>{{ slotProps.title }}</h2>
      </template>
      <p>This is the card content.</p>
    </BaseCard>
  </div>
</template>

<script>
import BaseCard from './components/BaseCard.vue'

export default {
  name: 'ParentComponent',
  components: {
    BaseCard
  }
}
</script>