vue插槽slot----具名插槽、匿名插槽、后续跟贴作用域插槽

vue 插槽是一个难点,而vue又可以组件化,所以我们如果熟练使用插槽、我们完全可以利用递归的方式,做一个万能的table表格、form表单之类的组件。

首先我们来了解一下:

什么是插槽?

插槽就是子组件中的提供给父组件使用的一个占位符,用 <slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。


插槽如何使用?(先介绍最基本的插槽)

定义一个子组件(比如child),在子组件标签里包裹一些html或者text

如:                

<child>父组件的数据在子组件slot中输出</child>;

然后在子组件中使用slot 标签


重点!!!

slot 与 props 的区别:

通过props属性,父组件可以向子组件传递属性、方法,可是父组件不能通过属性传递带标签的内容、甚至是组件,而插槽可以

插槽显不显示、以什么样的方式去显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。


接下来就是上代码的时刻咯,还是先介绍最基本的。

1.父组件index.vue

<template>
  <div>
    <child>父组件的数据在子组件slot中输出</child>
  </div>
</template>

<script>
import child from "./slot.vue";
export default {
  components: {
    child,
  },
};
</script>

<style></style>

2.子组件这里直接叫slot了:

<template>
  <div>
   <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

展示效果:

 这是一个简单的插槽演示,根据这个简单的插槽,我们接着往下引入插槽的深一层讲解


匿名插槽。  也叫做    单个插槽 or 默认插槽

没有设置name的插槽-------并且可以放置在组件的任意位置

但是这个地方有一个小坑,就是注意 一个组件中只能有一个这种类型的插槽

如果找不到的其他插槽的时候,作为一个备胎来用,没错备胎兄弟们,就是备胎

当然,兄弟们也不要太灰心,正所谓 总有人比你还惨!

上父组件!

<template>
  <div>
    <child>
        我现在是备胎了
      <hr />
    </child>
  </div>
</template>

<script>
import child from "./slot.vue";
export default {
  components: {
    child,
  },
};
</script>

<style></style>

子组件跟上!

<template>
  <div>
      <slot>我连备胎都不如</slot>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

那么接下来的效果展示:

 不要问我为什么,因为我已经有备胎了。我是口渴,但不是什么水都喝!


具名插槽

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

有名字的插槽,名字通过属性name来定义,可以多次调用

父组件

<template>
  <div>
    <child>
        我是备胎
        <hr/>
      <div slot="header">
        <h2>我是父组件中的插槽 在child组件内部 name名字是header</h2>
      </div>
    </child>
  </div>
</template>

<script>
import child from "./slot.vue";
export default {
  components: {
    child,
  },
};
</script>

<style></style>

子组件

<template>
  <div>
      <slot name="header"><br/>子组件中的solt name名字header 内容被覆盖掉</slot>
      <slot name="main"><br/>我没有默认值呢! </slot>
  </div>
</template>

<script>
export default {

}
</script>

<style></style>

展示效果

 由上面可以看出一点,也是我们之前讲过的 

为什么会渲染子组件中的main呢?

因为默认值只会在没有提供内容的时候被渲染,由此我们回到上面所讲的说过的。

插槽显不显示、以什么样的方式去显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。


  讲到这里如果明白的话请留言或者点赞哦!互相学习互相进步嘛!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

剑非出我心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值