slot插槽

　　写在template模板中

在组件的模板中使用了slot标签后，该组件在使用时可以在组件标签内填写内容，他会自动代替插槽的位置

1.插槽的基本使用
2,插槽的默认值button< /slot>
3.如果有多个值，同时放入到组件进行替换菜,一起作为替换元素->

如果你在组件的模板中  　在slot标签内写了内容，那么在你使用组件时，若组件内没有写内容，他会默认有一个button，但如果你标签内写了内容，那么button就没有了，取而代之的是你写的内容。 这么多文字形容不如看一个栗子： 代码截图

 运行效果：

 具名插槽的使用 　　（便于一个组件复用时能满足不同需求）

所谓具名插槽：就是在组件模板中添加插槽的时候，给插槽一个name。 
< /slot>
然后在使用组件时，想把内容添加到指定的插槽需要这样做　　
假设 是一个组件　　他的模板内容是
　我是name为‘猫猫’的插槽内容　
代码截图：

作用域插槽的使用： （若还不了解作用域的，请移步编译作用域的随笔：https://www.cnblogs.com/maomao777/p/15823950.html）

他的作用其实就是为了能让父组件能够拿到子组件的data，并按照自己想要的方式进行排列展示。
举个栗子：案例

 关键属性：slot-scope

<div id="app">
  <cpn>cpn>

  <cpn>
    
    <template slot-scope="slot">
　　　 
      
      <span>{{slot.data.join(' - ')}}span>
    template>
  cpn>

  <cpn>
    <template slot-scope="slot">
      
      <span>{{slot.data.join(' * ')}}span>
    template>
  cpn>
  
div>

<template id="cpn">
  <div>
　　// 这里的data是自定义的，就是绑定一个属性 值
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}li>
      ul>
    slot>
  div>
template>
<script src="../js/vue.js">script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }
        }
      }
    }
  })
script>