Vue 插槽(默认插槽 具名插槽 作用域插槽)

插槽

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

默认插槽

App.vue

    <Category>
      <img src="" alt="">
    </Category>

img插入到Category

Category.vue

<template>
  <div class="category">
      <h3>分类</h3>
        <slot>当没有插入值的时候,则会出现</slot>
  </div>
</template>

那么img图片就会替换Category.vue<slot></slot>

当没有在<Categort></Category>中插入任何内容,那么在Category.vue中的<slot></slot>的内容就会出现

具名插槽

此时我们有两个图片,我们希望将该图片放在Category.vue的头部和尾部

<Category>
  <img src="" alt="">
  <img scr="" alt="">
</Category>
<template>
  <div class="category">
      <slot>当没有插入值的时候,则会出现</slot>
      <h3>分类</h3>
      <slot>当没有插入值的时候,则会出现</slot>
  </div>
</template>

呈现效果及原因:

Vue不会自动把第一张图片放到Category.vue中的第一个slot,将第二张图片放在第二个slot, 相反 , 它会将两张图放在同一个slot,并且因为有两个slot,所以在页面中会出现两张图片


所以当插入的内容的希望放在不同的部分的时候,就要使用具名插槽

操作:

  1. 给插入的元素对外层绑定slot属性
  2. 给组件slot插槽,绑定name属性

注意:元素的slot属性和组件插槽的name属性一致

<Category>
  <img src="" alt="" slot="header">
  <img scr="" alt="" slot="footer">
</Category>
<template>
  <div class="category">
      <slot name="header">当没有插入值的时候,则会出现</slot>
      <h3>分类</h3>
      <slot name="footer">当没有插入值的时候,则会出现</slot>
  </div>
</template>

那么这样子就可以将两张图片放在放在不同的位置了


但是,当我们一个插槽插入的元素过多,那么在外部就必须要包裹一个<div slot=""></div>,但是这一个div是没有必要的,只是为了放入插槽而加上的

其实我们可以使用<template></template>来代替<div></div>,这样子就不会在实际代码中出现了

当使用了<template></template>来包裹元素,那么就有了另一种绑定方式了:

<!--父组件-->
<Category>
    <template v-slot:xxx>
        <div>
            ......
        </div>
    </template>
</Category>
<!--子组件组件-->
<template>
  <div class="category">
      <h3>分类</h3>
        <slot name="xxx"></slot>
  </div>
</template>

该方法绑定的注意点:

  1. v-slot后面是=
  2. v-slot的属性值不用带引号,否则会报错
  3. 只有template才有这一种写法

作用域插槽

个人理解:默认插槽和具名插槽是将内容给子组件,拼接完之后再被父组件调用;但是作用域插件更像是将子组件放在父组件中,子组件的数据被父组件调用

理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定

<slot  :game="games" :foods="foods" :cars="cars"></slot>
    data() {
        return {
            games:["E","D","G","N","B"]
        }
    },

在子组件这样子编写,那么传递给父组件的数据为:

{ "game": [ "E", "D", "G", "N", "B" ], "foods": "bread", "cars": "toyota" }

结论:

在子组件的slot编写属性,最后 属性名=>键 属性值=>值

当传递的数据不是一个字符串(变量,对象,数组)等,我们需要给绑定属性,才能方式 值 变成字符串

<Category>
    <template  slot-scope="data" >
        {{data}}
    </template>
</Category>

父组件使用slot-scope来获取子组件传递的数据,此处的data就是传递过来的数据

data = { "game": [ "E", "D", "G", "N", "B" ], "foods": "bread", "cars": "toyota" }

那么我们就可以使用data来编写代码了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值