插槽

老插槽

插槽基本使用

        <div id="app">
            <cpn> <button>插槽使用</button></cpn>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
    Vue.component('cpn',{
        props:['name'],
        template:`
        <div>
            <h1>hello</h1>
            <p>预留的位置</p>
            <slot>这里是默认值在这里的元素在无插入的时候显示</slot>
        </div>
        `
        <!-- <slot>就是插槽预留的位置再使用组件的时候在组件中写的填充进来</slot> -->
    })
     let vm = new Vue({
      el: '#app'
    })
        
    </script>

具名插槽

给插槽取名字,插入的元素可以准确的匹配

        <div id="app">
            <cpn> 
            <button slot="cc1">插入cc1插槽使用</button>
            <<button slot="cc2">插入cc2插槽使用</button>
            </cpn>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
    Vue.component('cpn',{
        props:['name'],
        template:`
        <div>
        <slot name="cc1"></slot>
            <h1>hello</h1>
            <p>预留的位置</p>
            <slot name="cc2">这里是默认值在这里的元素在无插入的时候显示</slot>
        </div>
        `
        <!-- <slot>就是插槽预留的位置再使用组件的时候在组件中写的填充进来</slot> -->
    })
     let vm = new Vue({
      el: '#app'
    })
        </script>   

作用域插槽

在每个组件中都有自己的作用域,这当前作用域下拿不到自己的数据

某个组件的插槽填充物希望能够使用当前组件自身的数据

1. 在这个组件的 插槽<slot></slot> 标签身上设置一些除了 name 之外的属性

2. 在这个插槽填充物上设置 slot-scope 属性，属性值就随便写个变量

3. 这个变量就是1步中的属性的对象集合。

        <div id="app">
            <cpn>
                <!-- 正常来说这样的name是根组件的 -->
            <!-- <p>{{name}}</p> -->
            <p slot-scope="add">{{add.name}}</p>
            <!-- 说白了就是自定义属性和对象 都能传递过来 -->
            </cpn>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
    Vue.component('cpn',{
        data(){
            return {
                name:'老王'
            }
        },
        template:`
        <div>
        <slot name="cc1"></slot>
            <h1>hello</h1>
            <p>预留的位置</p>
            
            <slot  :age='18' :name="laoliu">这里是默认值在这里的元素在无插入的时候显示</slot>
        </div>
        `
        <!-- <slot>就是插槽预留的位置再使用组件的时候在组件中写的填充进来</slot> -->
    })
     let vm = new Vue({
      el: '#app',
      data:{
          name:'老张',
          add:{}
      }
    })
        
    </script>

新插槽写法

插槽新语法

2.6.0 的时候，推出了 具名插槽与作用域插槽的新的使用方式，并且废 
 弃了 slot 与 slot-scope 属性
2018年除夕时候发布

提供了一个新的指令叫 v-slot:xxx="yyyy"
                  xxx   指令参数就可以用来设置插槽名字
                  yyyy  指令的值就可以用来设置作用域插槽


PS：

1. v-slot 只能用在 template 或者 组件上

  v-slot 要用在组件上有个限制就是: 必须用的是默认插槽 v-slot:default

        <div id="app">
            <cpn>
                <!-- 现在要用template包裹一下 v-slot方法后面的 key是名字 value是数据 -->
            <template v-slot:top="{ age }">
            <p>头 - {{ age }}</p>
            </template>
            
             <template v-slot:bottom="obj">
              <p>尾 - {{ obj.age }}</p>
            </template>
            </cpn>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
    
    Vue.component('hello', {
      data () {
        return {
          age: 18
        }
      },
    
      template: `
        <div>
          <slot name="top" age="20"></slot>
          <h1>hello</h1>
          <slot name="bottom"></slot>
        </div>
      `,
    })
    
    Vue.component('world', {
      template: `
        <div>
          <slot></slot>
          <h1>World</h1>  
          <slot name="bottom"></slot>
        </div>
      `
    })
    
    Vue.component('abc', {
      template: `
        <button>abc</button>
      `
    })
    
    let vm = new Vue({
      el: '#app',
    
      data: {
        name: 'root'
      }
    })
    </script>