slot插槽

1.插槽的简单使用方法

<div id="constain">

   <tone ref='tone'><p>我是个插槽</p></tone>

</div>

<template id="tone">

    <div>

        <slot></slot>

    </div>

</template>

 

 <slot></slot>标签会被<p>我是个插槽</p>所替代

 <slot></slot>中的内容为默认值，被插入时将被全部替换

 

2.具名插槽

<div id="constain">

   <tone ref='tone'><p slot="fist">我是个插槽</p></tone>

</div>

<template id="tone">

    <div>

        <slot name='fist'>具名插槽</slot>

        <slot>不具名插槽</slot>

    </div>

</template>

 

通过给slot设置name加以区分每个slot，然后通过绑定slot来确定具体调用哪个插槽

 

3.作用域插槽

 

<div id="constain">

  <tone :tods='todos'>　　　　　　　　　　　　　　　　　　　　　　//1.首先父组件将数据传给子组件

    <template slot-scope='slotProps'>                                                       //4.父组件通过slot-scope接收子组件传递过来的数据

        <tr v-for='item in slotProps.tod'>                                                      //5.最后，可以使用数据，插入插槽

            <td>{{item}}</td>

        </tr>

    </template>

  </tone>

</div>

<template id="tone">

    <div>

        <slot :tod = 'tods'></slot>　　　　　　　　　　　　　　　　　//3.子组件将数据传递给父组件　　　　

    </div>

</template>

<script>

    const app = new Vue({

        el:'#constain',

        data:{

           todos:['java','c#','c++','html']

        },

        components:{

            tone:{

                template:'#tone',

                props:{　　　　　　　　　　　　　　　　　　　　　　//2.子组件通过props接收父组件传递过来的数据

                    tods:{

                        type:Array

                    }

                }

            }

        }

    });

</script>

 

 

这样做有什么好处？

感觉最大的好处就是复用性-。-