0
点赞
收藏
分享

微信扫一扫

VUE-插槽slot的基本用法,具名插槽,插槽作用域

AbrahamW 2022-01-20 阅读 106

1.插槽的基本使用

//父组件
<div id="app">
  <cpn></cpn>
  <cpn><span>哈哈哈</span></cpn> 
</div>
//子组件
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件, 哈哈哈</p>
//插槽内部的内容为插槽默认值
    <slot><button>按钮</button></slot>
  </div>
</template>

结果:

插槽没有默认值时:

  • 父组件调用子组件时,不传递内容,则无变化只显示子组件的内容
  • 父组件调用子组件时,传递内容,则传递的内容渲染在插槽的位置

插槽有默认值时:

  • 父组件调用子组件时,不传递内容,则显示插槽的默认内容
  • 父组件调用子组件时,传递内容,则传递的内容替代插槽的默认内容

2.具名插槽

<div id="app">
  <cpn><button slot="left">返回</button></cpn>
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button>没名字</button></cpn>
</div>

<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
    <slot></slot>
  </div>
</template>

结果:

 

 

 插槽有默认值时:

当父组件传递对应插槽的内容时,用该内容替换该插槽的默认值,没有传递值的插槽显示默认值

 插槽没有默认值时:

父组件传递对应插槽的内容时,替换该插槽默认内容,没有传递不显示。

3.作用域插槽的案例

场景:子组件的插槽的默认值根据子组件内部数据展示,父组件调用子组件时,想要更换插槽中展示的样式,但是使用子组件的数据?

解决:在子组件插槽中将数据传递出去,父组件在调用子组件时,通过slot-scope=''slot''来获取插槽对象,再获取对应的数据:

<div id="app">
  <cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>
</div>

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

子组件插槽中通过 :data=planguages 将子组件的planguages传递出去

父组件中通过slot-scope="slot" 获取子组件插槽对象赋值给"slot",就可以通过slot.planguages获取子组件传递出来的值

举报

相关推荐

0 条评论