vue：slot（插槽）详解：父组件的内容放到子组件指定的位置

1、子组件中

//子组件child.vue中内容

首页

//这里是子组件中固定部分，没用slot

非固定部分 //这里是使用了slot部分，不固定，如果有给他传东西了，就会被替代，不传

则保留

2、父组件中

首先要把这个子组件注册到父组件中，具体省略，注册完后，子组件就可以当做一个标签使用。

花花花花花 //child标签之间的内容，不管是HTML元素还是文字都会全部替代

child.vue中 slot标签中的内容

3、结果

二、多个slot（具名插槽）

使用场景：

同一个组件，不同位置需要放置不同内容，比如有题目，文字，图片组合，那就可以设置多个slot，分别占坑，每个slot设置个名字，然后使用时候根据名字找到对应的slot，替换内容。

使用步骤：

1、子组件中定义多个插槽，以name属性区分

标题：

内容：

文字：

默认：

2、父组件中以template标签引入，并使用v-slot(v-slot 缩写为字符 #)绑定相应插槽的name属性作为区分

我是标题

我是内容

我是文字

//default指向的是不带name属性的slot

我是默认插槽

3、结果：

三、作用域插槽（子组件向父组件传值）

使用场景：

以上都是父组件给子组件传值，然后渲染展示的还是子组件的内容。有时候需要子组件中的值给父组件，有些人可能会问，子组件的值给传父组件，然后渲染展示还是子组件，为啥不直接在子组件中展示，原因很简单，同样的值，可能需要渲染不同的表现形式，比如1、2、3；可以展示出li：1、2、3，也可以展示出span：1、2、3，这个展现形式由父组件来控制。

父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。

加了个template标签，二次处理插槽了，其他的几种插槽都是原来啥样的，原封不动的替换了，这个是可以再整个操作再替换。作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。可以对值进行二次处理，可以让值用于不同的场景，可以从整体中拿出部分。

总的样式：v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射，然后用这个映射直接访问值

使用步骤：

1、子组件中：

//使用slot占位