Vue插槽随手笔记

形象比喻： 插槽就是在子组件内部挖两个坑，把父组件里写的内容填进去

插槽默认内容

// 父组件里面子组件如果没有插入内容就显示 default msg
    <slot>defalut msg</slot>
// 如果子组件如下，就显示son
    <Son> Son </Son>

具名插槽

slot="aaa" 与 name="aaa" 对应显示 ， slot="bbb" 与 name="bbb" 对应显示 ；剩余内容插到子组件内部的匿名插槽位置（如果有匿名插槽的话）

// 父组件Father
 <Son>
      <p slot="aaa">我是aaa</p>
      <p slot="bbb">我是bbb</p>
      <span>Jiraiya</span>
 </Son>

// 子组件Son
 <div>
    <slot></slot>
    <slot name="bbb"></slot>
    <slot name="aaa"></slot>
 </div>

• 浏览器显示：

    Jiraiya
    我是bbb
    我是aaa

作用域插槽

带数据的插槽 , 作用域插槽是子组件提供数据，父组件只需要提供一套样式

新旧两种写法

• slot-scope={{scope}}
• v-slot:default="scope"

scopeProps是自定义的名称，表示父组件接受来自子组件的数据，是一个对象； 
default是对应匿名插槽的时候的写法 ， 如果要用具名插槽 ， 就把default改成对应的名称。

slot="aaa"  slot-scope={{scope}}  等于  v-slot:aaa="scope"

// Son 子组件
<template>
  <div>
    <slot name="aaa" :son="sonData" :age="22"></slot>     // 传递数据 sonData 和 22
  </div>
</template>

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

// Father父组件
  <Son>
      <template v-slot:aaa="scope">           // aaa 就对应上面的 name="aaa"
        <p>姓名是： {{ scope.son.name }}</p>   // jiraiya    son对应上面的sonData数据
        <p>年龄是：{{ scope.age }}</p>         // 22         age对应上面的22
      </template>
  </Son>