Vue插槽

1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件。

2.分类:默认插槽、具名插槽、作用域插槽

3.使用方式:

        (1).默认插槽:

            父组件中:               

<Category>

        <div>html结构1</div>

</Category>

            子组件中:               

<template>

      <div>

            //定义插槽

            <slot>插槽状认内容...</slot>

      </div>

</template>

        (2).具名插槽:

            父组件中:               

 <Category>

        <template slot=" center">

               <div>htm1结构1</div>

        </template>



        <template v-slot:footer>

               <div>htm1结构2</div>

        </template>

</Category>

            子组件中:               

<template>

       <div>

              //定义插槽

              <slot name="center" >插槽默认内容..</slot>

              <slot name="footer" >插槽默认内容...</s1ot>

       </div>

</template>

        (3).作用域插槽:

            1.理解:数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中， 但使用数据所遍历出来的结构由App组件决定)

            2.具体编码:

                父组件中:                   

<Category>

                        <template scope=" scopeData">

                        //生成的是u1列表

                        <ul>

                            <li v-for="g in scopeData.games" :key="g">{{g}}</li>

                            </u1>

                            </template>

                    </Category>

                       

                    <Category>

                        <template slot-scope=" scopeData">

                        //生成的是h4标题

                        <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>

                        </template>

                    </Category>

                子组件中:

                   

                    <template>
                        <div>
                        <slot :games="games"></slot>
                        </div>
                    </template>
                    
                    <script>
                        export default {
                            name: 'Category',
                            props:['title'],
                            //数据在子组件自身
                            data(){
                                return {
                                    games:['红色警戒', "穿越火线'，'劲舞团'，"超级玛丽']
                                }
                            },
                        }
                    </script>