vue中插槽（默认插槽、具名插槽、作用域插槽）

App.vue：直接在使用子组件的标签中，插入html结构，同时可以传递数据到html。如果子组件不定义slot插槽，则插入的html结构保存在子组件的$slots上。理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件向子组件传递数据。App.vue：slot的使用者接收数据，然后将数据以不同的html结构插入到slot插槽。Category.vue：给slot定义name属性，区分不同的插槽。

vue中的插槽 笔记 --- 默认插槽、具名插槽、作用域插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用`` 表示，父组件可以在这个占位符中填充任何模板代码，这些模板代码都会替换子组件的``标签。简单理解就是子组件给父组件的内容留了地方，父组件代码可以填写到子组件里面...

这篇文章我们一起来学习一下 Vue2 插槽的使用，文章大致分为两个模块，第一部分是什么是插槽，其作用是什么，第二部分为三种插槽的使用，分别为默认插槽，具名插槽，作用域插槽，相信大家学习完这篇文章后一定会受益匪浅。

Vue中插槽使用——默认插槽、具名插槽、作用域插槽插槽(slot)默认插槽具名插槽作用域插槽 插槽(slot) 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 分类：默认插槽、具名插槽、作用域插槽 默认插槽 category.vue <template> <div class="category"> <h3>{{title}}分类</h3> <!-- 定义一个插槽

一、认识插槽Slot 在开发中，我们会经常封装一个个可复用的组件： 前面我们会通过props传递给组件一些数据，让组件来进行展示； 但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素； 比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片； 我们应该让使用者可以决定某一块区域到底存放什么内容和元素； 举个栗子：假如我们定制一个通用的导航组件 - NavBar 这个组件分成三块区域：左边-中间-右边，每块区域的

插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据插槽分为三种： 默认插槽 具名插槽 作用域插槽1.默认插槽 定义： 默认插槽是将父组件的结构和数据插入子组件中，默认插槽只有一个插入位置，要插入的html结构和data数据必须在父组件中，不过css可以在子组件中 简述： 将父组件的自定义html和data插入子组件的对应位置 特点： 父组件决定结构和数据2.具名插槽 定义： 具名插槽简单地说就是具有名字的插槽，只是默认插槽只有一个插入位置，具名插槽可以有多个插入位置，根据名字来识别对

Vue2 与 Vue3 的插槽（默认插槽、具名插槽、作用域插槽、具名插槽 + 作用域插槽）

Vue：关于插槽的详解。包括默认插槽的使用，具名插槽的使用，动态插槽名，作用域插槽的使用以及实战应用场景，和插槽的多层嵌套

【Vue】默认插槽

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

睡觉觉，累了。。。

默认插槽允许组件的使用者定义一些内容，这些内容会被插入到组件模板中的特定位置。这有助于实现灵活的内容分发和复用。是一个函数，用于声明组件的属性。这里声明了一个名为 "title" 的属性，它可以在父组件中使用。默认插槽没有名称标识，它是基于位置进行匹配的。在组件模板中，第一个未命名的插槽就是默认插槽。是一个插槽元素，它允许父组件在其内部插入内容。如果没有提供内容，将显示 "默认内容"。默认插槽中的数据不能直接访问外部组件的数据，但可以通过props属性传递数据给插槽。标签来定义默认插槽。

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

Vue07/Vue插槽介绍、默认插槽、插槽后备内容(默认值)

当在Vue.js中构建可复用的组件时，有时候需要在父组件中传递内容给子组件。Vue的插槽（slot）机制提供了一种灵活的方式来实现这种组件间通信。插槽允许你在父组件中编写子组件的内容，然后将其传递给子组件进行渲染。这样，你可以在子组件内部定义一些固定结构的模板，同时保留一些可以由父组件决定的可变内容。Vue中的插槽分为两种类型：具名插槽和默认插槽。

不管是vue2还是vue3的插槽，他们都分为两种：默认插槽和具名插槽。 插槽的优点就是，只需要摆放正确插槽出口的位置（样式调整好），定义插槽内容的顺序在组件中可以随意，但是同名的插槽内容总是会覆盖上一个插槽内容(vue2中)。 什么是默认插槽？什么是具名插槽？ slot标签不指定name属性的时候就是默认插槽，反之就是具名插槽。在定义插槽内容的时候，所有不指定插槽名称的内容，都会被输出到默认插槽的位置，反之也是一样。 vue2中插槽内容定义：在vue2.6.0之后，使用 v-slot或者语法糖#

插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据 name 来填充对应的内容。作用域插槽就是实现在子组件自行决定自己要显示什么内容动态指令参数也可以用在 v-slot 上，来定义动态的插槽名。