Vue的slot的理解

什么是slot

其实vue中slot是参考html中的slot元素，关于html中slot元素的定义是：

HTML slot 元素，作为 Web Component 技术套件的一部分，是 Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样你就可以创建单独的 DOM 树，并将它与其他的组件组合在一起。

<template>
  <slot>

  </slot>
</template>

<script>
  {/* 通过一个slot占位，然后我们可以通过设置它的name，以及向其中插入元素来达到这个“占位”效果 */}

  document.querySelector('slot').name = '???'
  
  // or

  document.querySelector('slot').innerHTML</script>

使用场景

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

插槽分类及作用

• 默认插槽 非常简单的默认传递
• 具名插槽

// 子组件用name属性来表示插槽的名字，不传为默认插槽

// 父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值

// 子组件Child.vue
<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>

// 父组件
<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

• 作用域插槽 这里涉及到一个渲染范围问题，

插槽内容可以访问父组件的数据范围，因为它是在父组件中定义的。

插槽内容无权访问子组件的数据。Vue 模板中的表达式只能访问它所定义的范围，这与 JavaScript 的词法范围一致。换言之：

父模板中的表达式只能访问父作用域;子模板中的表达式只能访问子作用域。

这样做即可： 子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

// 子组件
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>
// 父组件
<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>