插槽的自我记录

1.插槽的功能：

 使用组件时可以直接为其添加内容；

2.如何设置插槽？

在组件内设定插槽:<slot :name = 'header'></slot>; // name为插槽名·

​
// 插槽
<template>
  <div>
    <p>
      //slot为插槽元素，name属性有自定义值的为具名插槽,无名默认为匿名插槽
      <slot></slot>
      <slot name="a" :textContent="textContent"></slot>
    </p>
  </div>
</template>

// 插槽的内容
<template>
  <div class="home">
    <son :name="name" @ChangeFather="ChangeFather">
      // 插槽内容需要用template包裹，v-slot:绑定插入哪个槽：此处为p槽
      <template v-slot:p="props">
        <p>我是插到P槽的内容</p>
        <p>{{props.textContent}}</p>
      </template>
      <template v-slot:a>
        <p>我是插到a槽的内容</p>
      </template>
    </son>
  </div>
</template>

​

3.作用域插槽

前提：父级作用域无法获取子级作用域的内容

使用场景：插槽的内容为插槽组件的数据。

使用过程：

// 使用v-slot确定插入哪个槽：p，并指定接收插槽传递过来的属性的道具盒名称:props。   
<template v-slot:p="props">
        <p>{{props.textContent}}</p>
</template>