vue2插槽使用-- 默认插槽、具名插槽、作用域插槽

m0_74767583

已于 2023-03-02 09:20:42 修改

阅读量266

点赞数

分类专栏：插槽文章标签： javascript vue.js Powered by 金山文档

于 2023-03-01 19:56:16 首次发布

本文链接：https://blog.csdn.net/m0_74767583/article/details/129288115

版权

本文详细介绍了Vue.js中的插槽机制，包括默认插槽、具名插槽和作用域插槽的使用。通过示例代码展示了如何在父组件中插入和管理子组件的内容，以及2.6.0版后的v-slot新语法。

摘要由CSDN通过智能技术生成

Vue中插槽使用——默认插槽、具名插槽、作用域插槽

插槽(slot)

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

2、分类：默认插槽(匿名插槽)、具名插槽、作用域插槽

3、<slot>元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。

4、在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

默认插槽

NiMing.vue

<!-- 匿名插槽 -->
<template>
  <div class="category">
    <h3>{
   { title }}分类</h3>
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>

<script>
export default {
  name: "NiMing",
  props: ["title"],
};
</script>

<style scoped>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3 {