一、作用域插槽
<el-input v-model.trim="form.middleLayerPaperB.ringCrush" type="text"
placeholder="请输入">
<template slot="append">N/m</template>
</el-input>
父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
再通过append.childProp就可以调用子组件模板中的childProp绑定的数据,所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的去问题;
slot-scope 是插槽 <slot> 的一个特性。使用这个特性,父组件获取子组件 slot 绑定的属性值,传递数据(通过属性值传递数据)。
二、子组件的slot如何传值给父组件
公用子组件
<div
class="c2c-list"
v-for="(item,index) of dataList"
:key="index"
@click="goToDetail(item.id)"
>
<div class="money-btn right">
<p class="cny size14" >{{getPrecision(item.real_price,2)}}
{{item.quote_currency}}/{{item.base_currency}}
</p>
<slot name="otc-btn" :item="item"></slot>
</div>
</div>
父组件
使用slot的
<otc-list
:ad_type="ad_type"
:dataList="dataList"
:loading="loading"
:noMore="noMore"
@success="pullRefresh"
>
<div slot="otc-btn" slot-scope="props">
<p @click.stop="toHandlerOrder(props.item)"
>购买</p>
</div>
</otc-list>
![83c8efc88c8d9a9c3f4aac11cb84105e.png](https://i-blog.csdnimg.cn/blog_migrate/435fde6e1946b9ce77e575a0e64bafbc.jpeg)
父组件,不使用slot的
<otc-list
:ad_type="ad_type"
:dataList="dataList"
:loading="loading"
:noMore="noMore"
:myAdv="myAdv"
@success="pullRefresh"
></otc-list>
![59fb8c64b7d6bec8e7e2ed740b4adb2d.png](https://i-blog.csdnimg.cn/blog_migrate/c88f9a720a2c3c00702cf1e797d9e496.jpeg)