vue组件----插槽的使用

陈轻轻超轻

已于 2023-07-21 16:56:08 修改

阅读量1.5k

点赞数

文章标签：前端 vue.js vue

于 2022-11-22 20:51:14 首次发布

本文链接：https://blog.csdn.net/m0_73427312/article/details/127987343

版权

插槽：形象的说就是挖个坑，等着组件的使用者进行填充

插槽的本质：内容分发，子组件写了插槽，父组件可以将其内容直接放到页面上

用来实现组件内容的分发，通过slot标签，可以接收到写在 组件标签内的内容

vue提供组件插槽的能力，允许开发者在封装组件时，把不确定的部分定义为插槽

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，

适用于父组件===>子组件（父传子）

父组件中：<子组件>hello world</子组件>

子组件中： <slot></slot>
<h5>我是子组件</h5>

那么页面上的渲染结果为：

hello world

我是子组件

也就是说子组件标签中的内容属于父组件，因为作用域问题不会直接被识别，除非也属于子组件才能在页面中进行渲染，所以通过<slot></slot>在子组件中进行占位，<slot></slot>在子组件中的位置在哪，hello world就会在哪渲染出来。

即：子组件标签内的所有内容都会通过子组件的<slot>进行渲染，就相当于子组件中的插槽是形参，而父组件中子组件标签内的内容是实参。

默认(匿名)插槽

对于插槽，默认名字为 default

若没有给插槽传入内容，当需要一个默认内容时，则默认内容将会在页面渲染

若有内容传入插槽时，默认内容将会被覆盖

子组件中可以有多个插槽，若都是匿名插槽，则这些插槽都会接收到同样的信息进行渲染，所以和匿名插槽相对的就是具名插槽

具名插槽

一个组件有时候可以有多个插槽，为了将这些插槽区分开，也就有了具名插槽

当一个组件内有2处以上需要外部传入不同标签的地方

子组件：给插槽进行命名----title和price

<slot name="title"></slot>
<slot name="price"></slot>

父组件：v-slot: 可以用#进行简写，但必须有具体参数名字才可以

<template v-slot:title>
<h3>哈哈哈哈哈哈</h3>
</template>
<template #price>
<h3>零零零零</h3>
</template>

用<template>把内容包裹起来，通过名字的一一对应插入到子组件的插槽内

一个<template>包裹一个匹配给插槽的内容，

一个v-slot只能给一个<template>，

有几个插槽要匹配就要写几个<template>

若父组件的子组件标签内容里没有给指定名字，则匹配给匿名插槽，

若没有匿名插槽，则不会给任何匹配（不显示）

作用域插槽

可以传递数据的插槽

原因：

因为父级模板中的内容都在父级作用域中编译的，子级模板中的内容都在子级作用域中编译的

使用：

子组件里的值，在给插槽赋值时在父组件环境下使用-----让子组件的内容传给父组件

（用于子传父时可以理解为：数据在子组件的自身，但根据数据生成的结构需要组件的使用者来决定---把子组件内的内容通过父组件以插槽方式再传递给子组件本身的solt标签内,就可以把子组件data里的内容绑到slot标签上）

第一种：把子组件的数据传递到父组件并渲染

步骤：1.父组件与子组件的具名插槽做匹配

2.给子组件自定义属性并绑定要传递的数据的属性

3.让父组件再重新自定义一个名接收子组件传递过来的内容

4.在父组件的<template>标签内通过接收的自定义名讲接收的内容进行解构渲染

子组件插槽：

<slot name="插槽名" :自定义属性="要传的数据的属性名"></slot>

父组件：

<template v-slot:插槽名="自定义变量">//自定义变量是具名插槽传递过来的自定义属性中的所有属性，
                                   //会自动绑定slot上所有属性和值 若是个对象，则需要.来解构

<p>接收到的内容为{{自定义变量}}<p>  //自定义名内的内容一般会包含自定义属性，需要解构
</template>

总结：