Vue.js 学习笔记九:组件化开发之插槽 slot

目录

插槽 slot

插槽基本使用

具名插槽

作用域插槽

 


插槽 slot

Vue 实现了一套内容分发的 API,将元素作为承载分发内容的出口。这个自定义的元素,可以让我们向一个组件传递自定义的内容。

 

插槽基本使用

在子组件中,使用特殊的元素就可以为子组件开启一个插槽。

该插槽插入什么内容取决于父组件如何使用。

我们可以看一个简单的例子:

		

中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容。 给该组件添加内容,添加的内容会替换

 

具名插槽

自 2.6.0 起有所更新。 slot attribute 已废弃,官方推荐我们使用 v-slot 来替代。

当子组件的功能复杂时,子组件的插槽可能并非是一个。比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。对于这样的情况, 元素有一个特殊的 attribute:name。这个 attribute 可以用来定义额外的插槽:

·		
返回

在向具名插槽提供内容的时候,我们可以在一个