关于v-slot的一些学习笔记

使用slot时遇到的问题描述

错误的操作过程

因为项目创建的时候使用的是vue3.0的方法创建的，当时想要在使用子组件中使用slot插槽，按照2.0的办法正常进行操作，npm run serve 启动项目的时候结果就报错了，

[vue/no-deprecated-slot-attribute]
slot attributes are deprecated.

查看资料发现2.6之后好像就把这个使用给废弃了，vue3.0推荐使用v-slot去进行具名插槽的操作。
错误的代码片段：
TarBar.vue（子组件）

<template>
    <slot name="icon"></slot>
</template>

App.vue（父组件）

<template>
  <div id="app">
    <tar-bar>
      <div slot="icon">测试</div>
    </tar-bar>
  </div>
</template>

v-slot的使用

一开始怎么操作都在报错，按照大神写的文档使用v-slot也在报错。这是我一开始的操作，就感觉很傻
TarBar.vue（子组件）

<template>
    <div>
    	<template v-slot:icon></template>
    </div>
</template>

当时一直以为是在子组件上使用这个v-slot，然后就直接报错了，我还以为是需要安装什么关于v-slot的插件才行（因为刚接触vue）。结果统统没用，于是就重新拉了一个测试的项目，然后查资料，才发现，原来v-slot是要用在父组件上的，不然不会生效。子组件不需要变化。

TarBar.vue（子组件）

<template>
    <slot name="icon"></slot>
</template>

App.vue（父组件）

<template>
  <div id="app">
    <tar-bar>
    	<template v-slot:icon>
    	 <!-- 语法糖 -->
    	 <!--  <template #icon> -->
    		 <div>测试</div>
    	</template>
    </tar-bar>
  </div>
</template>

这样写就ok了，嗯，感觉多了一堆的标签。