vue2-插槽slot

vue2-插槽slot

1. 什么是slot

• 在vue中，slot翻译为插槽，简单点说，就是在子组件内放置一个插槽，等待父组件在使用子组件的时候决定放什么

2. slot分类

2.1 默认插槽

• 默认插槽也叫匿名插槽，子组件用clot标签来确定渲染的位置，标签里面可以放DOM结构，如果父组件在使用的时候没有网插槽里面传入内容，则会显示DOM结构，相当于会死吗，默认的显示内容

//子组件
<template>
  <slot>
    <p> I`m default content replaced by prentContent if hava</p>
  </slot>
</template>
//
<Child>
  <div>I`m content to replace child slot</div>
</Child>

2.2 具名插槽

• 子组件用name属性来表示插槽的名字，如果不给名称，则为默认插槽
• 父组件在使用时，在默认插槽的基础上加上slot属性，值为子组件插槽name的属性值，如果没有，则为default

// 子组件
<template>
  <slot>默认插槽</slot>
  <slot name="nameSlot">具名插槽</slot>
</template>
// 父组件
<Child>
  <template v-slot:default>默认插槽</template>
  <template v-slot:nameSlot>具名插槽</template>
</Child>

2.3 作用域插槽

• 子组件在作用域上绑定属性来讲子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上
• 父组件中在使用时通过v-slot：简写#,获取子组件的信息，在内容中使用

//子组件
<template>
  <slot name="footer" testProps="子组件绑定的属性，已被父组件获取">
    <p>默认内容</p>
  </slot>
</template>
//父组件
<Child>
  <template v-slot:default="slotProps">
    {{slotProps.testProps}}
  </template>
    <template #default="slotProps">
      {{slotProps.testProps}}
    </template>
</Child>