slot1接口(主板上的slot的接口)

前言: vue的slot主要分三种:1.普通插槽;2.具名插槽;3.作用域插槽。 使用插槽是在存在父子关系的组件中使用,我们可以在子组件中决定插槽的位置,同时子组件也可以给这些插槽的默认信息,当父组件中没有需要给子组件插槽插入信息时,显示的是子组件插槽定义的默认信息,下边简单说下vue这三种插槽如何使用。 准备工作: 很简单,就创建父组件testSlot.vue,子组件children.vue,并…

前言:

vue的slot主要分三种:1. 普通插槽;2. 具名插槽;3. 作用插槽。

使用插槽是在存在父子关系的组件中使用,我们可以在子组件中决定插槽的位置,同时子组件也可以给这些插槽的默认信息,当父组件中没有需要给子组件插槽插入信息时,显示的是子组件插槽定义的默认信息,下边简单说下vue这三种插槽如何使用。

准备工作:

很简单,就创建父组件testSlot.vue,子组件children.vue,并在testSlot组件中注册引入children组件。

slot1接口(主板上的slot的接口)

一 普通插槽的使用:

普通插槽:<slot></slot>

在子组件中定义一个普通插槽:

slot1接口(主板上的slot的接口)

在开发中我们经常使用到组件之间的传值,但很多情况涉及到的都是数据属性的传值,比如父组件将msg传给子组件:

slot1接口(主板上的slot的接口)

现在如果是这种情况:

slot1接口(主板上的slot的接口)

如果子组件中没有使用插槽的情况下:

slot1接口(主板上的slot的接口)

浏览器中的页面,父组件中的p标签的内容是不会还给子组件的:

slot1接口(主板上的slot的接口)

这时候,想让父组件定义的p标签传给子组件并显示,可以在子组件中定义一个默认插槽:

slot1接口(主板上的slot的接口)slot1接口(主板上的slot的接口)

在子组件中,你也可以定义多个默认插槽,并在子组件中决定这些默认插槽的位置,父组件要插入的内容,都会被填充到这些默认的插槽中:

slot1接口(主板上的slot的接口)slot1接口(主板上的slot的接口)

当然,父组件定义要插入到子组件的插槽的内容,并不一定只有是dom结构类型的,也可以是一个组件,也可以是普通的数据结构,只要子组件有定义插槽,就会把内容填充进去。

二 具名插槽的使用:

具名插槽:<slot name=”名称”></slot>

vue 2.6.0 版本使用具名插槽和作用域插槽有了新的统一语法,使用v-slot替换了之前的slot和slot-scope

什么叫具名插槽?

其实就是在子组件中定义插槽时,给对应的插槽分别起个名字,方便后边插入父组件将内容根据name来填充对应的内容。

子组件中,定义两个具名插槽:

slot1接口(主板上的slot的接口)

父组件中:

为了验证,子组件中的插槽可以填充任何结构的内容,所以我这边专门在one_slot插槽中插入一个组件,而在two插槽就单纯插入一串普通的数据

slot1接口(主板上的slot的接口)

页面结果:

slot1接口(主板上的slot的接口)

当然,子组件可以定义多个同名的具名插槽:

slot1接口(主板上的slot的接口)slot1接口(主板上的slot的接口)

三 作用域插槽:

作用域插槽:<slot :自定义name=data中的属性或对象></slot>

通过上边的默认插槽和具名插槽的使用过程中,发现,基本都是父组件中决定要插入到子组件中的内容,而子组件自行决定插槽的位置。

具名插槽,就是实现在子组件中自行决定自己要显示什么内容。

a.子组件:

slot1接口(主板上的slot的接口)

b.父组件:

这种时候有一种情况需要注意:

如果子组件中只有一个作用域插槽时,父组件可以使用下边这种简单的写法,当然规范点还是加上template模板标签好点:

slot1接口(主板上的slot的接口)

页面效果:

slot1接口(主板上的slot的接口)

但是当子组件中有多个作用域插槽时,不建议上边这种简单的写法,因为可能会出现作用域不明确的问题。

子组件有多个作用域插槽时:

slot1接口(主板上的slot的接口)

父组件使用这种规范的写法,可以避免有时作用域不明确问题:

slot1接口(主板上的slot的接口)

页面效果:

slot1接口(主板上的slot的接口)

本文来自投稿,不代表来拓客立场,如若转载,请注明出处:https://www.laituoke.com/ltk/41146.html

发表评论

登录后才能评论