vue中插槽的使用实例

1.匿名插槽

匿名插槽不需要设置那么属性，一个组件里面只能有一个，相应的具名插槽一个组件里面就可以有多个，只要设置name属性即可。

//父组件
<template>
  <div>
    <p>这里是父组件</p>
    <child>
      <p>我是插槽显示内容</p>
    </child>
  </div>
</template>

<script>
import Child from "../components/child";
export default {
  name: "fatherSolt",
  components: {
    Child
  }
};
</script>
//子组件
<template>
    <div>
        <p>这里是子组件</p>
        <slot></slot>
    </div>
</template>

效果展示

                                              这里是父组件

                                              这里是子组件

                                         我是插槽显示内容

2.具名插槽

具名插槽就是带那么属性的，如果需要在组价内部预留多个插槽位置，就需要给插槽定义名字，然后插入到相应的位置。在向具名插槽提供内容的时候，我们可以在<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称

// 父组件
<template>
  <div>
    <p>这里是父组件</p>
    <child>
      <template v-slot:header>
        <div>我是name为header的具名插槽</div>
      </template>
      <template v-slot:main>
        <div>我是name为main的具名插槽</div>
      </template>
      <template v-slot:footer>
        <div>我是name为footer的具名插槽</div>
      </template>
    </child>
  </div>
</template>

<script>
import Child from "../components/child";
export default {
  name: "fatherSolt",
  components: {
    Child
  }
};
</script>
// 子组件
<template>
  <div>
    <p>我是子组件</p>
    <slot name="header"></slot>
    <slot name="main"></slot>
    <slot name="footer"></slot>
  </div>
</template>

效果展示

             这里是父组件

             这里是子组件

          我是name为header的具名插槽

          我是name为main的具名插槽

          我是name为footer的具名插槽

具名插槽的缩写

把参数之前的内容（v-slot）换成#，注意如果使用缩写的话，必须要有确定的参数名

<template #header>
   <div>我是名字为header的具名插槽</div>
 </template>

3.作用域插槽

作用域插槽也称带数据的插槽，作用域插槽要求，要在slot上绑定数据。由于父级模板里的所有内容都是在父级作用域中变异的，子模板里的内容都是在子组件作用域中编译的，所以数据访问存在作用域问题，父组件不可以访问子组件的数据，为了让插槽内容能够访问子组件中才有的数据，将需要的特性绑定在插槽上——使用插槽prop。

//父组件
<template>
  <div>
    <p>这里是父组件</p>
    <child>
      <template v-slot = "msg">
        <span v-for="(item,index) in msg.data" :key="index">{{item.week}}</span>
      </template>
    </child>
  </div>
</template>
<script>
import Child from "../components/child";
export default {
  name: "fatherSolt",
  components: {
    Child
  }
};
</script>
//子组件
<template>
  <div>
    <p>我是子组件</p>
    //作用域插槽，给子组件加上绑定内容
    <slot :data="data"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        { week: "星期一" },
        { week: "星期二" },
        { week: "星期三" },
        { week: "星期四" }
      ]
    };
  }
};
</script>

效果展示

                             这里是父组件

                             我是子组件

                        星期一星期二星期三星期四