Vue 插槽 slot

在编写组件的时候，有些地方的内容不是固定的或者内容比较复杂必须得有父组件提供。通过props 形式当然可以从父组件中动态获取信息，但有时候信息太多就不利于阅读了或者传递了，为此vue专门考虑到这点，实现了插槽的功能。

插槽在vue中相当于占位符，子组件中使用slot 标签进行占位，即在父组件中固定区域的内容将直接传递到子组件中，如：

如果某个组件中需要父元素传递多个区域的内容，也就意味着需要提供多个插槽，为了避免冲突或者计算无法识别，就需要给不同的插槽赋予不同的名字，例如

<!-- 父组件 -->
<template>
  <div class="Layout-test">
    <Layout ><!-- 使用的子组件-->
        <template v-slot:left><!---v-slot:left意思是将插槽名字为left-->
        <!-- 这里面填写需要放入子组件中的信息，也就是这里面填写的内容，vue会无脑的、直接代替<slot name='left'/>-->
        </template>
        <template><!--插槽可以没有名字，默认值为default，他会寻找到没有名字的slot标签或者名字为default的slot标签，并将其里面内容与slot替换-->
        </template>
        <template #right><!--v-slot:可以简写为#-->
            right
        </template>
    </Layout>
  </div>
</template>


<!-- 子组件 -->
<template>
  <div class="Layout-container">
    <slot name="left"></slot>
    <slot name="default"></slot>
    <slot name="right"></slot>
  </div>
</template>

给插槽命名的时候可以用v-slot:name 或者 #name