vue 插槽slot的理解和使用方法

参考 https://segmentfault.com/a/1190000012996217?utm_source=tag-newest

一、前言

Vue的slot插槽，简单理解就是，在子组件内占坑，在父组件里填坑。

二、slot的作用

Q: 假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示呢还是不显示呢？

默认情况下是不会显示的，如下图所示，页面并没有显示父组件增加的

元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢？这就用到了slot插槽，使用slot这个标签可以将父组件放在子组件的内容，放到它想显示的地方

//错误写法：如果不用插槽形式，子组件的 div等内容是不会显示的。
<template>
  <div class="parent">
    <Child>
      <p>这里的文字不显示的。。。</p>
    </Child>
    <div class="now">1234567/98</div>
  </div>
</template>

三、个人理解及插槽的使用场景

一个复用的组件在不同的地方也些许变化，如果去重写子组件是很不明智的一件事，当然也可以将不同之处都写在子组件里，然后通过父组件传来的标识进行选择显示。

其实质是对子组件的扩展，通过slot插槽向组件内部指定位置传递内容，即将元素作为承载分发内容的出口；

具名插槽

//子组件  Child.vue
<template>
    <div class="child">
        <slot name='header'></slot>
        child内容
        <slot name='footer'></slot>
    </div>
</template>

在子组件里，用占位，并用name来区分。此处的name相当于类名class。

//父组件  parent.vue
<template>
  <div class="parent">
    <Child>
      <h1 slot="header" class="h1">header</h1>
      <h1 slot="footer" class="h1">footer</h1>
    </Child>
    <div class="now">1234567/98</div>
  </div>
</template>

在父组件里，引入了子组件, 在子组件中，可以插入div等标签，定义上对应的slot=“name”属性，来使用。

总结：slot插槽让我们在原有模版的基础上，定制更加多样化的组件。

四、父子组件通信----解构slot-scope

//子组件 child.vue
<template>
    <div class="child">
        <slot name="header" :users="users"></slot>
        <slot name="footer" ></slot>
    </div>
</template>
<script>
export default {
    data(){
        return {
            users: [
            {name: 'Jack', sex: 'boy'},
            {name: 'Jone', sex: 'girl'},
            {name: 'Tom', sex: 'boy'}
            ]
           
        }
    }
}
</script>

在子组件中插槽中通过 :users绑定了数据。

<template slot-scope="prop">
  <div >
    <Child>
      <div slot="header" slot-scope="scope" >
        <span>{{scope.users}} </span>
      </div>
      <h1 slot="footer">footer</h1>
    </Child>
  </div>
</template>

父组件可以通过slot-scope="scope"来取得子组件作用域插槽 。 通过scope.users获取到所需数据。