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

最新推荐文章于 2024-06-21 09:55:16 发布

剑非出我心

最新推荐文章于 2024-06-21 09:55:16 发布

阅读量401

点赞数 7

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51035283/article/details/121367539

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

展示效果