您的当前位置:首页正文

vue组件化中slot的基本使用方法

2023-12-06 来源:站点网
导读相信有过项目开发经验的小伙伴一定知道,在项目中往往会有多个地方需要用到样式相似,细节略有差异的组件,比如说导航栏和搜索栏,这些组件出现频率比较高,但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦,而且复用性也很低。可能有些读者会觉得,这不难解决,对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决,比如导航栏中的标题,我们可以都交由父组件传值来实现。(比如下面的导航栏1和导航栏2)不错,当组件的变化程度不大时,这确实可以十分

前言

slot可以在子组件中开启插槽,在父组件引用该组建时,可以定义这个插槽内要展现的功能或模块,下面话不多说了,来一起看看详细的介绍吧

1.单个slot

子组件中在相应位置写slot标签,父组件在引用子组件时,在子组件标签内写要插入插槽的元素;

还可以设置slot在父组件没有设置插槽时,子组件的插槽默认显示内容;

父组件.vue

<template> <div class="home"> <child-componment> <p> 这是父组件的slot替代内容! </p> </child-componment> </div></template>​<script>import childComponment from '@/components/childComponment.vue'export default { name: "home", components:{ childComponment }, data(){ return { message: '' } }};</script>

子组件childComponment.vue

<template> <div class="childComponment"> <h2>这是子组件childComponment!</h2> <slot> <span style="color: red;">如果父组件没有插入内容,我这样可以设置默认的显示内容</span> </slot> </div></template>​<script>export default { name: "childComponment", data(){ return { message: '' } }};</script>

2.具名slot(同时使用多个插槽)

给slot指定一个名称,可以分发多个slot插槽,但是只能有一个无名slot;

父组件的slot插槽内容,不写slot="xxx"的都会插到子组件的无名slot中;

如果没有指定无名slot(默认slot),父组件内多余的内容将会被抛弃。

<template> <div class="home"> <child-componment> <h1 slot="header"> 父组件的header </h1> <h6 slot="footer">父组件的footer</h6> <h6>父组件的无名slot-1</h6> <p> 父组件的无名slot-2 </p> </child-componment> </div></template>​<script>import childComponment from '@/components/childComponment.vue'export default { name: "home", components:{ childComponment }, data(){ return { message: '' } }};</script>

子组件

<template> <div class="childComponment"> <span>这是子组件childComponment的正常内容!</span> <div class="header"> <slot name="header"> <span style="color: red;">子组件默认header-slot</span> </slot> </div> <div class="container"> <!-- 如果没有指定无名slot(默认slot),父组件内多余的内容将会被抛弃 --> <slot> <span style="color: red;">子组件默认无名slot</span> </slot> </div> <div class="footer"> <slot name="footer"> <span style="color: red;">子组件默认footer-slot</span> </slot> </div> </div></template>​<script>export default { name: "childComponment", data(){ return { message: '' } }};</script><style scoped>.childComponment{ font-size: 16px;}.header{ height: 100px; border:1px solid red; color: red;}.container{ height: 500px; border: 1px solid black; color: black;}.footer{ height:100px; border: 1px grey solid; color: grey;}</style>

3.作用域插槽

<template> <div class="home"> <child-componment> <template slot-scope="slotProps"> <!-- 这里显示子组件传来的数据 --> <p>{{slotProps}}</p> </template> </child-componment> </div></template>​<script>import childComponment from '@/components/childComponment.vue'export default { name: "home", components:{ childComponment }};</script>

子组件

<template> <div class="childComponment"> <span>这是子组件childComponment的正常内容!</span> <div class="container"> <!-- 如果没有指定无名slot(默认slot),父组件内多余的内容将会被抛弃 --> <slot msg="子组件信息" slotData="子组件数据"></slot> </div> </div></template>

Tips:

作用于插槽也可是具名插槽

案例:列表组件

这是作用于插槽使用最多的案例,允许组件自定义应该如何渲染组件的每一项。

<template> <div class="about"> <h1>This is about page</h1> <my-list :books="books"> <template slot="bookList" slot-scope="myListProps"> <li>{{myListProps.bookName}}</li> </template> </my-list> </div></template><script>import myList from '@/components/myList.vue'export default { components:{ myList }, data(){ return { books: [ {name: 'css揭秘'}, {name: '深入浅出nodejs'}, {name: 'javascript设计模式与开发实战'} ] } }}</script>

子组件myList.vue

<template> <div class="myList"> <h1>This is myList page</h1> <ul> <slot name="bookList" v-for="book in books" :bookName="book.name"></slot> </ul> </div></template><script>export default { props:{ books:{ type: Array, default: function(){ return [] } } }, mounted(){ console.log(this.books) }}</script>

其实上面的案例可直接在父组件中for循环就好,此处只是作为演示slot的作用域插槽;

实际开发中作用域插槽的使用场景主要为:既可以复用子组件的slot,又可以使slot内容不一致。

4.访问slot

vue2.0提供了$slot方法来访问slot

此处代码以**“具名slot(同时使用多个插槽)”**的代码为例,修改一下子组件childComponment.vue

export default { name: "childComponment", data(){ return { message: '' } }, mounted(){ let header = this.$slots.header let main = this.$slots.default let footer = this.$slots.footer console.log(header) console.log(main) console.log(footer) console.log(footer[0].elm.innerHTML) }};

打印结果:

其中elm的内容为插槽内容,结构如下:

总结

小编还为您整理了以下内容,可能对您也有帮助:

Vue组件化开发(三)——slot插槽的使用

相信有过项目开发经验的小伙伴一定知道,在项目中往往会有多个地方需要用到样式相似,细节略有差异的组件,比如说导航栏和搜索栏,这些组件出现频率比较高,但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦,而且复用性也很低。
可能有些读者会觉得,这不难解决,对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决,比如导航栏中的标题,我们可以都交由父组件传值来实现。(比如下面的导航栏1和导航栏2)
不错,当组件的变化程度不大时,这确实可以十分方便地解决组件复用的问题。但如果说我想要实现根据不同的场景,导航栏中部的位置可能是标题,也有可能是下拉框,是搜索框或者是其他自定义的组件呢?此时我们就很难单纯通过 props 来拓展我们的组件灵活性了。(比如下面的导航栏1和导航栏3)

在子组件中,使用特殊的元素<slot>就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们可以看一下下面这个案例:
我们一共在Vue实例中使用了2次子组件,第一次父组件没有往子组件中传递元素,第二次父组件有往子组件传递元素。

从结果上看,当父组件没有往子组件插槽中添加元素时,则会展示插槽中默认的内容,而如果父组件有传递插槽内容,则会覆盖插槽的默认内容,而后进行显示。

在第二小节中,我们已经知道了插槽的基本使用,但是当子组件的功能比较复杂时,我们可能就要在组件中定义多个插槽,来满足更加灵活的业务需要。比如上面举例的京东导航栏,这个组件内部可以拆分为三个插槽,分别对应三个位置的内容。
但想要在组件内预留多个插槽有个前提条件,就是我们必须要让每个插槽都有其对应的唯一标识,这样父组件传递内容的时候,才能识别出来哪些内容对应哪个插槽。

我们可以看一下下面这个案例:
子组件内定义了三个具名插槽,我们在父组件中进行子组件的调用,需要注意的是我们并没有完全按照顺序去传递对应插槽的内容。但实际上从演示结果中我们可以发现,无论父组件传递的插槽内容顺序如何,最终解析的时候都会将传入的插槽内容根据 slot name 进行正确的渲染的

在讲解作用域插槽之前,我们需要先对编译作用域进行理解。具体表现在父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
我们可以通过下面这个案例来理解这个规则:
父组件和子组件都使用了 isShow 来控制组件的显示,同时在父子组件的data中,又都有同名的变量 isShow 。我们从结果中可以看到,定义在在父组件中子组件,其组件是否可见取决于父组件data中的变量值。而在子组件template中定义的 isShow 标识,则受子组件自身data变量的约束,也就是说此处子组件模板的变量取的是子级作用域中的变量值。

在上一小节的演示中,我们已经可以了解到编译作用域的概念,也知道了父组件无法直接使用子组件内部的数据(因为子组件模板内部的数据是在子组件的作用域中的)。但有些场景下,我们又会需要父组件可以替换插槽的标签,但是内容由子组件来提供。那么,此时我们就可以使用作用域插槽来解决这个问题。

我们可以来看一下下面这个案例:子组件中存在一个数组,现在我们想要通过插槽的方式,来根据不同的需要实现数组的展示方式:
在父组件中,我们定义了2种展示数据的方式,一种为展示为列表形式,还有一种是每种语言以 -- 进行分割。在使用上,子组件需要在插槽处通过 :data 的方式提供对外暴露的数据,父组件在使用的时候,则是先在子组件内部定义 <template> 标签,从 slot-scope 属性中取出slotProps参数(其实slotProps就是一个对象,里面封装着所有子组件插槽对外暴露的数据)。
我们通过 slotProps.data 就可以获取到我们在子组件插槽中封装的data数据啦

至此,有关插槽的内容就到此结束啦,作用域插槽多见于常见的组件库中(比较多是在table组件中出现),所以最好要熟悉插槽的原理和使用,这样可以更好地简化我们的开发工作

Vue组件化开发(三)——slot插槽的使用

相信有过项目开发经验的小伙伴一定知道,在项目中往往会有多个地方需要用到样式相似,细节略有差异的组件,比如说导航栏和搜索栏,这些组件出现频率比较高,但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦,而且复用性也很低。
可能有些读者会觉得,这不难解决,对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决,比如导航栏中的标题,我们可以都交由父组件传值来实现。(比如下面的导航栏1和导航栏2)
不错,当组件的变化程度不大时,这确实可以十分方便地解决组件复用的问题。但如果说我想要实现根据不同的场景,导航栏中部的位置可能是标题,也有可能是下拉框,是搜索框或者是其他自定义的组件呢?此时我们就很难单纯通过 props 来拓展我们的组件灵活性了。(比如下面的导航栏1和导航栏3)

在子组件中,使用特殊的元素<slot>就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们可以看一下下面这个案例:
我们一共在Vue实例中使用了2次子组件,第一次父组件没有往子组件中传递元素,第二次父组件有往子组件传递元素。

从结果上看,当父组件没有往子组件插槽中添加元素时,则会展示插槽中默认的内容,而如果父组件有传递插槽内容,则会覆盖插槽的默认内容,而后进行显示。

在第二小节中,我们已经知道了插槽的基本使用,但是当子组件的功能比较复杂时,我们可能就要在组件中定义多个插槽,来满足更加灵活的业务需要。比如上面举例的京东导航栏,这个组件内部可以拆分为三个插槽,分别对应三个位置的内容。
但想要在组件内预留多个插槽有个前提条件,就是我们必须要让每个插槽都有其对应的唯一标识,这样父组件传递内容的时候,才能识别出来哪些内容对应哪个插槽。

我们可以看一下下面这个案例:
子组件内定义了三个具名插槽,我们在父组件中进行子组件的调用,需要注意的是我们并没有完全按照顺序去传递对应插槽的内容。但实际上从演示结果中我们可以发现,无论父组件传递的插槽内容顺序如何,最终解析的时候都会将传入的插槽内容根据 slot name 进行正确的渲染的

在讲解作用域插槽之前,我们需要先对编译作用域进行理解。具体表现在父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
我们可以通过下面这个案例来理解这个规则:
父组件和子组件都使用了 isShow 来控制组件的显示,同时在父子组件的data中,又都有同名的变量 isShow 。我们从结果中可以看到,定义在在父组件中子组件,其组件是否可见取决于父组件data中的变量值。而在子组件template中定义的 isShow 标识,则受子组件自身data变量的约束,也就是说此处子组件模板的变量取的是子级作用域中的变量值。

在上一小节的演示中,我们已经可以了解到编译作用域的概念,也知道了父组件无法直接使用子组件内部的数据(因为子组件模板内部的数据是在子组件的作用域中的)。但有些场景下,我们又会需要父组件可以替换插槽的标签,但是内容由子组件来提供。那么,此时我们就可以使用作用域插槽来解决这个问题。

我们可以来看一下下面这个案例:子组件中存在一个数组,现在我们想要通过插槽的方式,来根据不同的需要实现数组的展示方式:
在父组件中,我们定义了2种展示数据的方式,一种为展示为列表形式,还有一种是每种语言以 -- 进行分割。在使用上,子组件需要在插槽处通过 :data 的方式提供对外暴露的数据,父组件在使用的时候,则是先在子组件内部定义 <template> 标签,从 slot-scope 属性中取出slotProps参数(其实slotProps就是一个对象,里面封装着所有子组件插槽对外暴露的数据)。
我们通过 slotProps.data 就可以获取到我们在子组件插槽中封装的data数据啦

至此,有关插槽的内容就到此结束啦,作用域插槽多见于常见的组件库中(比较多是在table组件中出现),所以最好要熟悉插槽的原理和使用,这样可以更好地简化我们的开发工作

[vue3进阶] 4.slot插槽1——基本用法和默认值

关于slot插槽的内容比较多,我们一点一点来学习,为了更好的理解slot的作用,我们一边写一个实例,一边来学习。
现在我们要开发一个标题栏组件,在开发中,我们经常会自己做一个标题栏,用来显示页面标题

我们先来写titleBar这个组件的基本结构,现在它显示的标题是固定的,

在App.vue中使用它

现在我们的标题栏组件显示出来了,但是它显示固定内容,显然是不行的,我们需要把显示的标题变为动态,小伙伴们肯定想到了可以用之前学过的porps,从父组件向子组件传递数据的方式实现,
这节课我们要用slot这种方式,
修改titleBar文件的内容,增加<slot></slot>标签

slot中文翻译为插槽,我们可以理解为<slot></slot>标签在这里是一个槽,占了一个位置,等待父组件的内容插入进来
那我们来修改一下父组件的内容

我们看到父组件把内容插入进来的方式是在标签里写上内容,跟原生标签插入内容的方式是一样的

我们看一下最后渲染出来的html的内容

我们看到<title-bar></title-bar>标签里的内容放到里<slot></slot>标签所占的位置

使用slot比使用props更强大的特点有一点就是slot可以直接插入html,比如

渲染html的结果

我们看到span标签占据了原来slot的位置
显示效果:

这就是slot最基本的用法了,简单来说就是在子组件中留个位置,在父组件中,写在标签内部的内容就会传递过来,占上空位。

我们titleBar这个组件在不用页面使用的时候,只要在标签里面写上相应的页面名称就行了

在使用titleBar时,内容并没有给它传递内容

这时当然就不显示内容了

如果你需要在插槽没有插入内容时,显示默认值,那就需要把默认值写在slot标签里面,
我们来修改titleBar的内容

这样,就可以显示一个默认值了

这节课重点主要在于理解slot起到了一个占位作用,父组件调用时,把标签里面的内容放到slot的位置。

[vue3进阶] 4.slot插槽1——基本用法和默认值

关于slot插槽的内容比较多,我们一点一点来学习,为了更好的理解slot的作用,我们一边写一个实例,一边来学习。
现在我们要开发一个标题栏组件,在开发中,我们经常会自己做一个标题栏,用来显示页面标题

我们先来写titleBar这个组件的基本结构,现在它显示的标题是固定的,

在App.vue中使用它

现在我们的标题栏组件显示出来了,但是它显示固定内容,显然是不行的,我们需要把显示的标题变为动态,小伙伴们肯定想到了可以用之前学过的porps,从父组件向子组件传递数据的方式实现,
这节课我们要用slot这种方式,
修改titleBar文件的内容,增加<slot></slot>标签

slot中文翻译为插槽,我们可以理解为<slot></slot>标签在这里是一个槽,占了一个位置,等待父组件的内容插入进来
那我们来修改一下父组件的内容

我们看到父组件把内容插入进来的方式是在标签里写上内容,跟原生标签插入内容的方式是一样的

我们看一下最后渲染出来的html的内容

我们看到<title-bar></title-bar>标签里的内容放到里<slot></slot>标签所占的位置

使用slot比使用props更强大的特点有一点就是slot可以直接插入html,比如

渲染html的结果

我们看到span标签占据了原来slot的位置
显示效果:

这就是slot最基本的用法了,简单来说就是在子组件中留个位置,在父组件中,写在标签内部的内容就会传递过来,占上空位。

我们titleBar这个组件在不用页面使用的时候,只要在标签里面写上相应的页面名称就行了

在使用titleBar时,内容并没有给它传递内容

这时当然就不显示内容了

如果你需要在插槽没有插入内容时,显示默认值,那就需要把默认值写在slot标签里面,
我们来修改titleBar的内容

这样,就可以显示一个默认值了

这节课重点主要在于理解slot起到了一个占位作用,父组件调用时,把标签里面的内容放到slot的位置。

vue插槽slot理解

vue的插槽用法,官方文档写的内容个人感觉有点乱,不自己梳理一下的话,使用的时候也容易懵*,下面是我对vue插槽使用的理解:

slot概念源于web components规范草案(地址: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md )
vue官网关于插槽的文档中,第一句话即说明了vue的slot插槽设计源于web components,具体内容可以自行了解,这里只说vue框架下slot的用法。

概念:slot可将父组件子组件标签里写的content渲染到子组件对应的地方

先说通用性用法,再说特殊情况会让人比较容易接受。这里以最具通用性的写法,以具名插槽的写法为例子展开
父组件中:

子组件中

渲染结果:

父组件template标签上的v-slot指令与子组件的slot标签的name属性,通过绑定一样的值,形成一一对应的关系。
父组件中:

子组件中:

注意,上述例子中,都有v-slot绑定default属性的情况,这里需要说明下,vue中的插槽用法,default属性的模板和插槽存在特殊的对应情况,而比较容易混乱的点就在这里,这也是vue官网插槽文档让人看得很蒙圈的地方,因为官网并没有给我们分区域的讲述通用情况和特殊情况,而是穿插着讲,让人容易理不清楚关系。

子组件的slot标签中的值可以写入内容,这部分内容会在没有对应的模板内容的时候,作为默认值展示
父组件

子组件

渲染结果

具名插槽的写法具备通用性,学会了具名插槽写法,那么插槽的用法已经能够掌握8成了。下面将展开的是插槽中的特殊对应关系

------------默认的default模板和插槽-----------
父组件

子组件情形1

子组件情形2

渲染结果都是

由于两种情形中都没有name属性是test的插槽,所以渲染结果中没有出现test模板里的内容。

上述例子中涵盖了2个知识点,首先通过子组件情形2能得到渲染结果,可以得出一个结论:

default模板的内容必定会渲染到defalut插槽中,所以,通过子组件情形1能得出渲染结果,也可以得出一个结论:

最后还需要注意,模板和插槽的对应关系是1对多的关系。即同名模板只能有一个,但是同名插槽可以有无数个,会同时渲染

以上内容涵盖了9成的插槽用法,足以满足日常使用。下面将要对插槽作用域问题展开讲解

很简单
1.模板内容一般都是在父组件,所以模板内容的作用域自然是父组件的作用域,父组件的动态内容基本上取自父组件的变量或函数,但是有特殊情况可以读取到子组件传出来的值,第3点会讲。

2.同理,插槽一般都是在子组件,所以作用域自然在子组件,比如子组件插槽中放入了动态内容作为默认值,该动态内容必定取值于子组件的变量,也只能读取到子组件的变量和函数

3.特殊情况,父组件可以用子组件传出来的值,这个时候会有写法上的变化:
子组件

父组件正常调用

父组件解构对象调用

渲染结果

v-slot指令可以变成缩写的写法,类似v-bind缩写为:,v-on缩写为@,v-slot可以缩写为#
例如

等价于

这里出现了v-slot指令直接绑定在子组件标签名上的情况,使用场景是,当前模板只有一个default模板,并且需要获取子组件传来的值时,才能这样使用。

不接受传值的情况,会报错

非default模板,也会报错
子组件

父组件

除了default模板外,还存在其他模板时,也会报错

以上基本总结了插槽的所有用法,其中第5点和第8点的特殊情况都是针对default模板的,这一点一定要分清楚。

还有1点很关键的知识,即default模板和插槽不算是具名模板和插槽,第8点的非default模板会报错的原因,即该特殊情况不支持具名模板和插槽。但是default模板和插槽在平时写的时候可以用具名模板和插槽的写法,也可以用省略的写法,即第5点描述的情况。

vue插槽slot理解

vue的插槽用法,官方文档写的内容个人感觉有点乱,不自己梳理一下的话,使用的时候也容易懵*,下面是我对vue插槽使用的理解:

slot概念源于web components规范草案(地址: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md )
vue官网关于插槽的文档中,第一句话即说明了vue的slot插槽设计源于web components,具体内容可以自行了解,这里只说vue框架下slot的用法。

概念:slot可将父组件子组件标签里写的content渲染到子组件对应的地方

先说通用性用法,再说特殊情况会让人比较容易接受。这里以最具通用性的写法,以具名插槽的写法为例子展开
父组件中:

子组件中

渲染结果:

父组件template标签上的v-slot指令与子组件的slot标签的name属性,通过绑定一样的值,形成一一对应的关系。
父组件中:

子组件中:

注意,上述例子中,都有v-slot绑定default属性的情况,这里需要说明下,vue中的插槽用法,default属性的模板和插槽存在特殊的对应情况,而比较容易混乱的点就在这里,这也是vue官网插槽文档让人看得很蒙圈的地方,因为官网并没有给我们分区域的讲述通用情况和特殊情况,而是穿插着讲,让人容易理不清楚关系。

子组件的slot标签中的值可以写入内容,这部分内容会在没有对应的模板内容的时候,作为默认值展示
父组件

子组件

渲染结果

具名插槽的写法具备通用性,学会了具名插槽写法,那么插槽的用法已经能够掌握8成了。下面将展开的是插槽中的特殊对应关系

------------默认的default模板和插槽-----------
父组件

子组件情形1

子组件情形2

渲染结果都是

由于两种情形中都没有name属性是test的插槽,所以渲染结果中没有出现test模板里的内容。

上述例子中涵盖了2个知识点,首先通过子组件情形2能得到渲染结果,可以得出一个结论:

default模板的内容必定会渲染到defalut插槽中,所以,通过子组件情形1能得出渲染结果,也可以得出一个结论:

最后还需要注意,模板和插槽的对应关系是1对多的关系。即同名模板只能有一个,但是同名插槽可以有无数个,会同时渲染

以上内容涵盖了9成的插槽用法,足以满足日常使用。下面将要对插槽作用域问题展开讲解

很简单
1.模板内容一般都是在父组件,所以模板内容的作用域自然是父组件的作用域,父组件的动态内容基本上取自父组件的变量或函数,但是有特殊情况可以读取到子组件传出来的值,第3点会讲。

2.同理,插槽一般都是在子组件,所以作用域自然在子组件,比如子组件插槽中放入了动态内容作为默认值,该动态内容必定取值于子组件的变量,也只能读取到子组件的变量和函数

3.特殊情况,父组件可以用子组件传出来的值,这个时候会有写法上的变化:
子组件

父组件正常调用

父组件解构对象调用

渲染结果

v-slot指令可以变成缩写的写法,类似v-bind缩写为:,v-on缩写为@,v-slot可以缩写为#
例如

等价于

这里出现了v-slot指令直接绑定在子组件标签名上的情况,使用场景是,当前模板只有一个default模板,并且需要获取子组件传来的值时,才能这样使用。

不接受传值的情况,会报错

非default模板,也会报错
子组件

父组件

除了default模板外,还存在其他模板时,也会报错

以上基本总结了插槽的所有用法,其中第5点和第8点的特殊情况都是针对default模板的,这一点一定要分清楚。

还有1点很关键的知识,即default模板和插槽不算是具名模板和插槽,第8点的非default模板会报错的原因,即该特殊情况不支持具名模板和插槽。但是default模板和插槽在平时写的时候可以用具名模板和插槽的写法,也可以用省略的写法,即第5点描述的情况。

大前端之vue插槽slot

什么是插槽?

在vue中通过slot可以向组件中指定位置插入内容。

插槽的通俗理解就是是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置),当插槽也就是坑<slot name=”mySlot”>有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容。

首先是单个插槽,单个插槽是vue的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置name属性。

单个插槽可以放在组件任意位置, 但是一个组件有且只能有一个单个插槽 ,相对应的,具名插槽就可以有很多个。

匿名插槽没有name属性,所以是匿名插槽,那么,插槽加了name属性,就变成了具名插槽。具名插槽可以在一个组件中出现N次,出现在不同的位置。下面的例子,就是一个有两个具名插槽和单个插槽的组件,这三个插槽被父组件用同一套css样式显示了出来,不同的是内容上略有区别。

匿名插槽和具名插槽都是在父组件中定义内容与样式,子组件只是负责放在哪。但是如果子组件提供数据,那这样的话需要子组件的<slot>把数据传递给父组件,父组件只需要提供样式即可。

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

(十八)补充-Vue3中插槽的使用

vue3中的插槽是在用的时候和vue2的区别略有不同,常见插槽使用中主要体现在具名插槽上。

1、vue3中新增了v-slot来代替vue2中的slot等属性。

2、在普通插槽中使用:

结果会将el-table的内容渲染到组件模板中的el-main中。它还有另一种写法:

此种写法就是vue3中新增的插槽指令,它还有另一种写法:

此种写法类似于v-on简写于@,v-bind简写于:,v-slot也有简写:#。

3、在具名插槽中使用,

可以通过给v-slot指令增减一个参数名称来指定具体的某一个插槽(具有name属性的插槽)

在此组件中就包含了已给匿名插槽以及,name分别为"top-left","top-right","bottom"的三个具名插槽。

那么我们在使用的时候直接使用插槽的简写来对指定的插槽指定要渲染的内容。

下一章: (十九)setup 语法糖应用

上一章: (十七)Vue3.x使用provide/inject来代替vuex的实现方式

ps: 未经他人事,勿劝他人善!

站点网还为您提供以下相关内容希望对您有帮助:

Vue组件化开发(三)——slot插槽的使用

在使用上,子组件需要在插槽处通过 :data 的方式提供对外暴露的数据,父组件在使用的时候,则是先在子组件内部定义 &lt;template&gt; 标签,从 slot-scope 属性中取出slotProps参数(其实slotProps就是一个对象,里面封装着所有子...

(十八)补充-Vue3中插槽的使用

1、vue3中新增了v-slot来代替vue2中的slot等属性。2、在普通插槽中使用:结果会将el-table的内容渲染到组件模板中的el-main中。它还有另一种写法:此种写法就是vue3中新增的插槽指令,它还有另一种写法:此种写法类似...

vue3中插槽slot的使用

在子组件中写插槽标签slot给slot添加name属性。   &lt;slot name="left"&gt;     &lt;slot name="right"&gt; 使用插槽 &lt;template #left&gt;   aa&lt;/sapn&gt; &lt;template #right&gt;   bb&lt;/sapn&gt; &lt;...

Vue插槽:slot、slot-scope与指令v-slot使用方法区别讲解

slot-scope使用:在组件模板中书写所需slot插槽,并将当前组件的数据通过v-bind绑定在slot标签上。在组件使用时,通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。通过scope.xxx就可以使用绑定数据了 作用域插槽:v...

vue插槽slot理解

具体内容可以自行了解,这里只说vue框架下slot的用法。概念: slot可将 父组件 在 子组件标签里 写的 content 渲染到子组件 对应 的地方 先说通用性用法,再说特殊情况会让人比较容易接受。这里以最具通用性的写法,以 ...

大前端之vue插槽slot

什么是插槽? 在vue中通过slot可以向组件中指定位置插入内容。插槽的通俗理解就是是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中&lt;slot&gt;位置),当插槽也就是...

slot(插槽)

在子组件中定义插槽时,给对应的插槽分别起个名字,方便后续父组件将内容根据 name 来填充到对应的位置。 使用具名插槽的方法:如上所示,”标题“最终会替换掉”中间的“显示 插槽可以控制html模板的显示与不显示。作用域...

Vue3,插槽,slot,单个slot,具名slot,作用域slot,案例代码

vue2.5版本中slot-scope取代了scope,来实现作用域插槽,主要用在组件调用中,具体在template标签上面使用slot-scope来获取插槽slot上面的属性值,获取值的为一个对象,slot-scope=”它可以取任意字符串”,在element-ui的组件...

slot 内容分发(组件相互嵌套)

&lt;slot text="我是hello" text1="组件的数据"&gt;&lt;/slot&gt; 相当于被渲染为 在 App.vue 中调用 Hello 组件时,通过在 template 中写入 slot-scope 特殊属性来获取数据 被渲染的结果为:在 App.vue 组件内 在 Hello.vue...

Vue——自定义组件 &amp; 自定义事件$emit &amp; 插槽slot

在 components 选项中定义局部组件。每个组件就是一个小型的Vue实例,它里面除了不能设置el选项,其他选项它都有。 组件名称: 自定义,可以使用驼峰命名方式或者短横线的命名方式,但是需要注意的是如果应用到DOM中,就只能...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top