vue3 v-slot,vue v-slot,vue3.0 toref,vue中slot,vue3.0 onmounted,vue3.0 $set
在Vue 3.0中，Slot（插槽）得到了一些改进，其中最大的一个是引入了统一的<slot>标签语法。

在Vue 2.x中，我们可能会使用以下方式定义一个插槽：


<!-- 父组件模版 -->
<template>
<div>
<slot name="header"></slot>
<div class="content">
<slot></slot>
</div>
<slot name="footer"></slot>
</div>
</template>

<!-- 子组件模版 -->
<template>
<div>
<h1 slot="header">这是标题</h1>
<p>这是正文</p>
<p>这也是正文</p>
<button slot="footer">确定</button>
</div>
</template>


然而，在Vue 3.0中，可以使用单个 <slot> 标签并通过其属性传递插槽名称。例如：


<!-- 父组件模版 -->
<template>
<div>
<slot name="header"/>
<div class="content">
<slot/>
</div>
<slot name="footer"/>
</div>
</template>

<!-- 子组件模版 -->
<template>
<div>
<h1 v-slot:header>这是标题</h1>
<p>这是正文</p>
<p>这也是正文</p>
<button v-slot:footer>确定</button>
</div>
</template>


另外，还可以将 v-slot:缩写为 #，如下所示：


<!-- 父组件模版 -->
<template>
<div>
<slot name="header"/>
<div class="content">
<slot/>
</div>
<slot name="footer"/>
</div>
</template>

<!-- 子组件模版 -->
<template>
<div>
<h1 #header>这是标题</h1>
<p>这是正文</p>
<p>这也是正文</p>
<button #footer>确定</button>
</div>
</template>