Vue2:slot插槽的三种用法

一、场景描述

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

二、插槽

1、默认插槽

父组件给子组件传data数据HTML结构
子组件只有一个slot

      父组件中:
              <Category>
                 <div>html结构1</div>
              </Category>
      子组件中:
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot>插槽默认内容...</slot>
                  </div>
              </template>

2、具名插槽

父组件向子组件的指定slot,传递data数据HTML结构
子组件可以有多个slot,每个slot指定name

      父组件中:
              <Category>
                  <template slot="center">
                    <div>html结构1</div>
                  </template>
      
                  <template v-slot:footer>
                     <div>html结构2</div>
                  </template>
              </Category>
      子组件中:
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot name="center">插槽默认内容...</slot>
                     <slot name="footer">插槽默认内容...</slot>
                  </div>
              </template>

3、作用域插槽

数据在子组件中,子组件向父组件传data数据,父组件向子组件传HTML结构
子组件可以有多个slot,每个slot指定name

         父组件中:
         		<Category>
         			<template scope="scopeData">
         				<!-- 生成的是ul列表 -->
         				<ul>
         					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
         				</ul>
         			</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>

三、总结

1、slot中可以绑定多组数据
绑定数据

<slot :games="games" msg="test"></slot>

获取数据

                <template scope="data"  slot="center">
                    <ul slot="center">
                        <li v-for="(g,index) in data.games" :key="index">{{g}}</li>
                    </ul>
                </template>
                <template scope="data"  slot="footer">
                    <h4>{{data.msg}}</h4>
                </template>

2、在第三种用法中,如果slot是多个,那么,在父组件中使用的时候,需要指定slot进行使用
绑定数据

<slot :games="games" msg="test"></slot>

获取数据

				<template scope="data"  slot="footer">
                    <h4>{{data.msg}}</h4>
                    <h4>{{data.games}}</h4>
                </template>
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值