关于插槽的更多用法可以看vue官方文档,我目前急需上手工作要用,还有许多东西要学习,所以现在只能暂且囫囵吞枣,取点需要的,有时间的建议还是细嚼慢咽https://cn.vuejs.org/v2/guide/components-slots.html
一 .插槽的作用
- 让我们封装的组件更加具有扩展性。
- 让使用者可以决定组件内部的一些内容到底展示什么。
本篇内容:普通插槽,具名插槽,作用域插槽
二 .单个普通插槽
举个栗子比如京东商城移动app每个页面都有一个导航栏,虽然架构相似,但是每个部分功能都不同,其实这就是插槽,用了同一个组件,但是组件内部只是留了三个位置,没有指定具体内容,由父组件负责扩展和定制具体内容.
使用组件其实就是抽取共同点,保留不同点的坑位(插槽),让父组件去扩展定制即可.
代码举个栗子
如果我们在组件引用初写了许多标签,他们也会被全部插到插槽里,如
我们也可以在组件内部<template>模板定义插槽时候写一些默认值,比如
<template><solt>暂时无法访问<solt><teplate>>,但是一旦我们在父组件用的时候写了插槽的值,那么默认值将被替换.
二 .具名插槽----多个插槽的使用
有的时候我们需要对一个组件预留多个位置供父组件定制,那么就需要引入多个插槽,但是如果直接使用多个插槽,直接在父组件进行使用时,无法定向的进入或者说定制某个特定插槽,比如下面这个例子,实际上是所有内容对所有插槽均赋值了一遍.
解决方法:我们可以对每个插槽进行命名(具名)
如下图所示我们对每个插槽进行命名后,他们就只会匹配上了对应的插槽名才接受数据进来.
三 作用域插槽
作用域插槽的作用核心思想:
通俗来讲:就是拿到父组件在使用子组件时拿到子组件里插槽使用的数据,并在引用的时候进行重新的定制.
此外对于作用域插槽,我们在组件内部定义slot时
- 供父组件使用的数据可以指定多个数据
- 子组件插槽返回时返回的是一个对象,每个返回的元素是对象中的元素.
-
对于命名没有具体要求,两个位置保持一致即可
比如我们原来默认竖着展示,如果父组件想横着展示可以拿到插槽数据进行自己定制
再看一下,我们插槽返回两个数据时,父组件接受的啥--是一个对象
安利一个小函数-join,一个数组调用join(item)可以使其中所有元素依次遍历并以item进行分割
网友评论