Vue 进阶(幺贰柒):插槽详解
一、概述
插槽就是子组件中用slot
标签定义的预留位置,可以设置name
属性,也可以不设置name
属性,设置name
属性的叫具名插槽
,不设置name
属性的叫不具名插槽
,在父组件中使用子组件时候,可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html
代码。
插槽使用的关键在于:在父组件中使用子组件标签的时候可以往子组件内写入 html 代码。
二、使用步骤
子组件中定义插槽;
父组件使用子组件时往插槽写入代码;
三、何时使用插槽?
简单的举个栗子:有 2 个组件,父组件 father,子组件 son。
父组件 father
子组件 son
一般我们的组件都会怎么写,但是这么写的话,会发现子组件中的实践slot
是显示不出来的。如果需要让他显示出来,这时我们就可以用到插槽slot
了。
四、如何使用插槽?
首先,子组件中我们要添加插槽slot
,
这时,终于出现了slot
。slot
的位置就会出现父组件中实践 slot 这几个大字。
可以看到,这里 的slot
是没有名称的,顾名思义,这是插槽中的不具名插槽
。
然后再看看具名插槽,直接上代码。
父组件
子组件
可以看出,和默认插槽不同的是,在子组件中,我们给插槽一个name
属性,这个就是插槽的名称,同时在父组件中,我们在需要将内容插入的地方标签上加了一个slot
属性,他的值就是我们的slot
名称name
。
接下来看下slot-scope
。slot-scope
是作用域插槽。
官网中有一句特别强调的话:父组件模板的所有内容都会在父级作用域内编译;子组件模板的所有内容都会在子级作用域内编译。简单的说,就是父组件中不能直接用子组件中定义的data
数据。而slot-scope
的出现就是解决了这样的问题。
父组件
子组件
其中,下方三个对象的值,我们本身是在子组件中定义的,按照官方文档中说的,本来父组件中是无法显示出来这些数据的,但是为什么现在显示出来了呢?这就要归功于我们强大的slot-scope
了。
首先,在子组件中的插槽上有一句data="list"
,而在父组件中也有slot-scope="scope"
,slot-scope
就是取data
的值,slot-scope
的值是自定义的,我们可以取任何名称,但是data
的值传过来时是以对象形式传输的,所以在这scope.data
才是list
的值。
这样我们就可以在父组件中取到子组件的值,并且加以应用了。
五、拓展阅读
从
vue2.6.0
开始,slot
、slot-scope
已经被废弃,推荐使用v-slot
;有关两者的用法区别,请移步博文《Vue进阶(幺贰捌):Vue插槽:slot、slot-scope与指令v-slot使用方法区别讲解》。
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/2197128e78eed0c49a01835ab】。文章转载请联系作者。
评论