VUE作用域插槽详解(<slot>、v-slot、slot-scope)

什么是插槽?

插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。插槽显不显示怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制

如下代码:

  1. 在子组件中放一个占位符
    在这里插入图片描述
  2. 在父组件中给这个占位符填充内容:
    在这里插入图片描述
  3. 展示的效果:
    在这里插入图片描述

现在来看看,如果子组件中没有放插槽,同样的父组件中在子组件中填充内容,会是啥样的:

  1. 子组件代码无插槽:

在这里插入图片描述
2. 父组件照常填充内容:
在这里插入图片描述
3. 展示的效果:
在这里插入图片描述
总结:如果子组件没有使用插槽,父组件如果需要往子组件中填充模板或者html, 是没法做到的

插槽的使用

插槽的最最简单使用,上面已有例子,这里就不写了,接下来看看,插槽其他使用场景。

插槽的使用 - 具名插槽

描述:具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。

如下代码:

  1. 子组件的代码,设置了两个插槽(header和footer):
    在这里插入图片描述
  2. 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中
    在这里插入图片描述
    3.展示的效果:
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值