vue插槽

插槽指自定义组件像普通标签一样插入内容

1.基本用法

​ 组件中

<template>
  <div>
    <el-card class="box-card" style="border-color:pink">
      <slot></slot>
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

​ 使用组件

import A from "./a.vue";

components: { A }

 <A> 
    <template>b</template>
 </A>

2.具名插槽

​ 组件中

<template>
  <div>
    <el-card class="box-card" style="border-color:pink">
      <slot name="header"></slot>
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

​ 使用组件

import A from "./a.vue";

components: { A }

 <A> 
    <template slot="header">b</template>
 </A>

3.作用域插槽

​ 组件中

<template>
  <div>
    <el-card class="box-card" style="border-color:pink">
      <slot :a="name"></slot>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "aa"
    };
  }
};
</script>

<style></style>

​ 使用组件

import A from "./a.vue";

components: { A }

 <A> 
   <template slot-scope="props">b {{ props.a }} </template>
 </A>