您的当前位置:首页如何在项目中使用vue+slot插口

如何在项目中使用vue+slot插口

2023-11-29 来源:华拓教育
这次给大家带来如何在项目中使用vue+slot插口,在项目中使用vue+slot插口的注意事项有哪些,下面就是实战案例,一起来看一下。

子组件

<template> <p class="slotcontent"> <ul> <!--<slot></slot>--> <li v-for="item in items">{{item.text}}</li> </ul> </p></template><script> export default{ data(){ return{ items:[ {id:1,text:'第1段'}, {id:2,text:'第2段'}, {id:3,text:'第3段'}, ] } } }</script><style scoped></style>

  父组件

<template> <p> <h2>首页</h2> <router-link to="/home/details">跳转到详情</router-link> <p>父组件</p> <slotshow> <p>{{msg}}</p> </slotshow> </p></template><script> import slotshow from '../components/slotshow' export default{ data(){ return{ msg:"测试内容" } }, components:{ slotshow } }</script><style></style>

  这种情况是如果要父组件在子组件中插入内容 ,必须要在子组件中声明slot 标签 ,如果子组件模板不包含<slot>插口,父组件的内容<p>{{msg}}</p>将会被丢弃。

当slot存在默认值<slot><p>默认值</p></slot>,且父元素在<slotshow></slotshow>中没有要插入的内容时,会显示<p>默认值</p>(p标签会去掉),当slot存在默认值,且父元素在<child>中存在要插入的内容时,则显示父组件中设置的值,

具名slot

<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素

var childNode = { template: ` <p class="child"> <p>子组件</p> <slot name="my-header">头部默认值</slot> <slot name="my-body">主体默认值</slot> <slot name="my-footer">尾部默认值</slot> </p> `,};var parentNode = { template: ` <p class="parent"> <p>父组件</p> <child> <p slot="my-header">我是头部</p> <p slot="my-footer">我是尾部</p> </child> </p> `, components: { 'child': childNode },};

仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽。匿名slot只能作为没有slot属性的元素的插槽,有slot属性的元素如果没有配置slot,则会被抛弃

var childNode = { template: ` <p class="child"> <p>子组件</p> <slot name="my-body">主体默认值</slot> <slot></slot> </p> `,};var parentNode = { template: ` <p class="parent"> <p>父组件</p> <child> <p slot="my-body">我是主体</p> <p>我是其他内容</p> <p slot="my-footer">我是尾部</p> </child> </p> `, components: { 'child': childNode },};<p slot="my-body">插入<slot name="my-body">中,<p>我是其他内容</p>插入<slot>中,而<p slot="my-footer">被丢弃

如果没有默认的 slot,这些找不到匹配的内容片段也将被抛弃

var childNode = { template: ` <p class="child"> <p>子组件</p> <slot name="my-body">主体默认值</slot> </p> `,};var parentNode = { template: ` <p class="parent"> <p>父组件</p> <child> <p slot="my-body">我是主体</p> <p>我是其他内容</p> <p slot="my-footer">我是尾部</p> </child> </p> `, components: { 'child': childNode },};<p>我是其他内容</p>和<p slot="my-footer">都被抛弃

作用域插槽

作用域插槽是一种特殊类型的插槽,用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中,只需将数据传递到插槽,就像将 props 传递给组件一样

<span style="font-size: 16px"><p class="child"> <slot text="hello from child"></slot></p></span>

在父级中,具有特殊属性 scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象.

var <span style="color: #ffffff">childNode</span> = { template: ` <p class="child"> <p>子组件</p> <slot xxx="hello from child"></slot> </p> `,};var parentNode = { template: ` <p class="parent"> <p>父组件</p> <child> <template scope="props"> <p>hello from parent</p> <p>{{ props.xxx }}</p> </template> </child> </p> `, components: { 'child': childNode },};

如果渲染以上结果,得到的输出是

【列表组件】

作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项

var childNode = { template: ` <ul> <slot name="item" v-for="item in items" :text="item.text">默认值</slot> </ul> `, data(){ return{ items:[ {id:1,text:'第1段'}, {id:2,text:'第2段'}, {id:3,text:'第3段'}, ] } }};var parentNode = { template: ` <p class="parent"> <p>父组件</p> <child> <template slot="item" scope="props"> <li>{{ props.text }}</li> </template> </child> </p> `, components: { 'child': childNode },};

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

怎样使用vue做出单页应用前端路由

Vue项目内应用第三方验证码

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

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组件中出现),所以最好要熟悉插槽的原理和使用,这样可以更好地简化我们的开发工作

vue插槽的使用

在我们开发项目的时候,我们往往会封装一些公用的组件,但是组件在应用的过程中,往往不能满足我们的需求,这个时候,我们就需要用到插槽

vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发内容,那插槽是怎么使用的呢?它要解决什么场景的问题呢? 我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件,但是在实际使用这个组件的时候却又不能完全的满足需求,我希望在这个组件中添加一点东西,这时候我们就需要用到插槽来分发内容。 注意:以下的所有内容是基于vue版本 2.6.0 起

首先写一个父组件

然后是子组件

在这里关键点是父组件里面调用子组件,然后看看是否显示 测试内容显示

执行结果

3.1默认插槽

在我们引入一个button的时候,你希望btn里面的值,可以修改,可以控制,这个时候

button 组件 需要有<slot>标签,里面默认的文字就是button的内容

当你想要调用这个组件修改里面的值的时候,你只要传对应的值就即可

3.2具名插槽

如果我们在子组件特定的位置显示一些不一样的内容,这个时候,就用到了具名插槽,我们可以给插槽绑定name的值

当然也可以简写 v-slot用#代替

3.3作用域插槽

在我们父组件需要调用子组件的时候,然后呢,子组件的值需要替换,就需要用到作用域插槽

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

不具名插槽

具名插槽

v-slot

v-slot在组件中使用slot进行占位时,也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签,template标签内,使用v-slot指令绑定插槽名,标签内写入需要添加的内容。

作用域插槽:

slot-scope使用:

在组件模板中书写所需slot插槽,并将当前组件的数据通过v-bind绑定在slot标签上。

在组件使用时,通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

通过scope.xxx就可以使用绑定数据了

作用域插槽:v-slot的用法

Vue2.6.0中使用v-slot指令取代了特殊特性slot与slot-scope,但是从上述案例可以看出,v-slot在使用时,需要在template标签内,这点大家在应用时要注意。

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