大家都知道,插槽的作用是让父组件传递html结构给子组件中,那么改怎么样使用呢?

首先插槽分为具名插槽和作用域插槽,那我们就谈谈这两种插槽有什么区别吧

具名插槽

1.给子组件的添加name属性 ： name="插槽名"

2.父组件使用v-slot:插槽名 : 给指定的插槽传递结构

• 注意：这个v-slot指令必须要写在<template>标签中,否则会报错
• <template>是HTML5新增的一个语义化标签，模板的意思。 这个标签本身不会被渲染，因此最终在页面是看不见的。 这个标签类似于div,就是一个空盒子容器。 与div唯一的区别就是它不会渲染

以下有两张图大家可以看一下

说了具名插槽,那么我们来谈谈作用域插槽吧

1.给子组件的<s1ot>添加一个自定义属性：<s1ot:属性名="属性值"></s1ot>

2.给父组件的<temp1ate>添加v-slot属性接收数据：<template v-slot="对象名"></template>

父组件使用子组件内部数据语法：对象名.属性名

具名插槽和作用域插槽语法区别

1.具名插槽: `<template v-slot:name值></slot>` 

2.作用域插槽: `<template v-slot="对象名"></slot>` 

3.具名插槽作用：父组件 传递 `多个html结构` 给 子组件 

4.作用域插槽作用：父组件 给 子组件 传递插槽 时，可以使用`子组件内部的数据`

那么插槽与props的异同点是什么呢

1.插槽与props的异同点

相同点： 都是父传子

不同点：

props: 传递的是数据

插槽：传递的是html结构

2.作用域插槽和$emit异同点

相同点：都是子传父

不同点：

$emit : 子传父的数据通过事件来接收

作用域插槽：子传父的数据是通过插槽v-slot接收 （子传父的数据，只能给插槽用）