slot属性值_vue的slot出现时为了解决什么问题

最新推荐文章于 2024-05-21 10:07:55 发布

谢凌曦

最新推荐文章于 2024-05-21 10:07:55 发布

阅读量383

点赞数

文章标签： slot属性值

本文链接：https://blog.youkuaiyun.com/weixin_33359523/article/details/112517820

版权

一、作用域插槽
<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>

效果图

父组件，不使用slot的
<otc-list
      :ad_type="ad_type"
      :dataList="dataList"
      :loading="loading"
      :noMore="noMore"
      :myAdv="myAdv"
      @success="pullRefresh"
></otc-list>

效果图