举个栗子比如京东商城移动app每个页面都有一个导航栏,虽然架构相似,但是每个部分功能都不同,其实这就是插槽,用了同一个组件,但是组件内部只是留了三个位置,没有指定具体内容,由父组件负责扩展和定制具体内容.
使用组件其实就是抽取共同点,保留不同点的坑位(插槽),让父组件去扩展定制即可.
代码举个栗子
如果我们在组件引用初写了许多标签,他们也会被全部插到插槽里,如
我们也可以在组件内部<template>模板定义插槽时候写一些默认值,比如<template><solt>暂时无法访问<solt><teplate>>
,但是一旦我们在父组件用的时候写了插槽的值,那么默认值将被替换.
有的时候我们需要对一个组件预留多个位置供父组件定制,那么就需要引入多个插槽,但是如果直接使用多个插槽,直接在父组件进行使用时,无法定向的进入或者说定制某个特定插槽,比如下面这个例子,实际上是所有内容对所有插槽均赋值了一遍.
解决方法:我们可以对每个插槽进行命名(具名)
如下图所示我们对每个插槽进行命名后,他们就只会匹配上了对应的插槽名才接受数据进来.
作用域插槽的作用核心思想:父组件替换插槽的标签,但是内容由子组件来提供。
通俗来讲:就是拿到父组件在使用子组件时拿到子组件里插槽使用的数据,并在引用的时候进行重新的定制. 此外对于作用域插槽,我们在组件内部定义slot时
比如我们原来默认竖着展示,如果父组件想横着展示可以拿到插槽数据进行自己定制 再看一下,我们插槽返回两个数据时,父组件接受的啥--是一个对象
安利一个小函数-join,一个数组调用join(item)可以使其中所有元素依次遍历并以item进行分割