Vue 插槽（老版本）

以下皆是老版本

1.插槽的基本使用
组件插槽的目的是为了让我们封装的组件更加具有扩展性 余留性空间

• 匿名插槽

<div id="app">
   <cpn></cpn>
   <cpn><span>span本人</span></cpn>//标签中间写的是插槽内的内容 老版本
   <cpn><span v-slot:default>span本人</span></cpn>  //新版本
   <cpn>  //标签内写了很多标签 但是只有一个插槽 标签替换默认值
     <i>标签</i>
     <button>按钮</button>
     <button>按钮2</button>
   </cpn>
</div>
<template>
     <h2>我是组件</h2>
     <p>我是组件哈哈哈</p>
     <slot><button>按钮</button></slot>  //1.插槽  留个地方 里面的东西是默认值  用的时候如果标签内写了新插入的内容则把默认值覆盖
</template>

<script>
const app =  new Vue({
     el:"#app",
     data:{},
     components:{
            cpn:{
                 template:'#cpn'
            }
     }
})
</script>

• 具名插槽的使用

<div id="app">
   <cpn><span slot="center">标题</span></cpn>
    //只会替换slot属性的值等于插槽名字的  
   <cpn><span v-slot:center>标题</span></cpn>
    //新版本的具名插槽
   
</div>
<template  id="cpn">
  <div>
    //起个名字
     <slot><span name="left">左边</span></slot>
     <slot><span name="center">中间</span></slot>
     <slot><span name="right">右边</span></slot>
  </div>   
</template>

<script>
const app =  new Vue({
     el:"#app",
     data:{},
     components:{
            cpn:{
                 template:'#cpn'
            }
     }
})
</script>

2.编译作用域
父子间模板的所有东西都会在父级作用域内编译，子组件模板模板的所有东西都会在子级作用域内编译
自己理解：组件在哪用 作用域就在哪？？？？
3.作用域插槽
父组件替换子组件插槽内的标签，但是数据由子组件提供（在父组件中拿到子组件里的值）

<div id="app">
   <cpn>
     //2.引用一个slot-scope="slot"  
     <template slot-scope="slot">
         //3.是使用值
         <span v-for = "item  in  slot.data"></span>
     </template>
   </cpn>
</div>
<template id="cpn">  
  <div>
      //1.绑定pLanguages值为一个属性    :data可以随便命名
     <slot  :data="pLanguages">
        <ul>
          <li v-for="item in pLanguages">{{item}}</li>
        </ul>
     </slot>
  </div>   
</template>

<script>
const app =  new Vue({
     el:"#app",
     data:{},
     components:{
            cpn:{
                 template:'#cpn',
                 data(){
                    return{
                      pLanguages:['java','c++','Go']
                    }
                 }
            }
     }
})
</script>