Vue 插槽slot的使用(具名插槽、作用域插槽)

按钮

呵呵呵

我是DIV元素

我是段落

我是key

我是内容

我是默认内容，如果没有插入东西，就会显示我

---

具名插槽slot

• 当子组件的功能复杂时，子组件的插槽可能并非是一个。

• 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。

• 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？

这个时候，我们就需要给插槽起一个名字

• 如何使用具名插槽呢？

• 非常简单，只要给slot元素一个name属性即可

演示

---

标题

返回

更多

左边

中间

右边

作用域插槽

• 作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰。

• 这里，我们用一句话对其做一个总结，然后我们在后续的案例中来体会：

• 父组件替换插槽的标签，但是内容由子组件来提供。

样例需求

• 子组件中包含一组数据，比如：pLanguages：[‘JavaScript’,‘Python’,‘Swift’,‘Go’,‘C++’]

• 需要在多个页面进行展示

• 某些页面是以水平方向一一展示的

• 某些界面是以列表形式展示的

• 某些界面直接展开一个数组

• 内容在子组件，希望父组件告诉我们如何展示，怎么办呢？

• 利用slot作用域插槽

//这里的solt只是一个名字

{{item}}——

{{slot.data.join(‘——’)}}

//把子组件的数据绑在slot上

• {{item}}

• ---