vue slot相关知识点

vue slot相关知识点

插槽slot

封装一个组件，预留一些插槽，使用该组件的时候可以分发个性化的内容，不至于封装的组件被写死；类似一个填空题，插槽就是留下来的需要的填空；

slot的编译原则

作用域的编译原则： 父组件中的所有内容是在父组件里面编译；子组件里面的内容都是在子组件中编译；

如下test,test2都属于父组件的，父组件插槽模板中可以访问这两变量；子组件中的url属性就访问不了，url属性属于子组件中定义的；这两编译的作用域是隔离的。

// 父组件
<template>
  <div class="m-app">
    <figure-list :url="test2">
      <div>{{ test }}</div>
    </figure-list>
  </div>
</template>

// 子组件 <figure-list>
<template>
    <div>
        {{ url }}
        <slot></slot>
    </div>
</template>

父组件中的定制的插槽内容想访问子组件的属性

子组件中带出插槽prop给到父组件使用，如子组件带出user,父组件中通过v-slot指定拿到插槽prop —— user在父组件中使用；

// 父组件
<template>
    <figure-list v-slot="slotProps">
      <div>{{ slotProps.user }}</div>
    </figure-list>
</template>

// 子组件
<template>
    <div>
      <slot v-bind:user="user" />
    </div>
</template>

具名插槽

具名插槽可以满足使用组件的时候，可以提供多个插槽被定制化处理；给slot具名name属性来区分不同的插槽；

// 父组件
<template>
  <div class="m-app">
    <figure-list>
      <template v-slot:header>
        <div>header</div>
      </template>
      <template v-slot:body>
        <div>body</div>
      </template>
    </figure-list>
  </div>
</template>

// 子组件
<template>
    <div>
        <slot name="header" />
        <slot name="body" />
    </div>
</template>