Vue 插槽slot的使用

Vue中提供<slot>标签让我们自定义组件的内容。当组件中有一部分内容不确定，就可以在这个位置上添加一个slot标签，供使用者自定义内容。

基础用法

子组件

<template>
  <!-- 子组件代码 -->
  <div>
    <h1>Child组件</h1>
    <div>
      <p>11111</p>
      <slot></slot>
      <p>33333</p>
    </div>
  </div>
</template>

父组件

<template>
  <div>
    <h1>Main组件</h1>
    <hr />
    <Child></Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  components: {
    Child,
  },
};
</script>

目前的页面

当父组件在<Child>中添加内容后，内容会自动填充到刚刚预留的slot标签

<template>
  <div>
    <h1>Main组件</h1>
    <hr />
    <Child>
      <p>22222</p>
      <!-- 新添加的代码    -->
    </Child>
  </div>
</template>

目前的页面

另一种情况是slot标签本身有内容，如果父组件不添加内容，则会渲染slot标签本身的内容。如果父组件添加了内容，则会覆盖slot标签本身的内容

情况一 ：父组件不添加内容

<template>
  <div>
    <h1>Main组件</h1>
    <hr />
    <Child> </Child>
  </div>
</template>

子组件的slot标签有内容

<template>
  <!-- 子组件代码 -->
  <div>
    <h1>Child组件</h1>
    <div>
      <p>11111</p>
      <slot>哈哈哈</slot>  <!-- 自身有内容-->
      <p>33333</p>
    </div>
  </div>
</template>

目前的页面

情况二：父组件有添加内容

<template>
  <div>
    <h1>Main组件</h1>
    <hr />
    <Child>
      <p>22222</p>
    </Child>
  </div>
</template>

目前的页面

可以看到slot标签预留的内容被父组件添加的内容覆盖了

具名插槽

当组件中预留了多个slot标签，则需要给每个slot标签添加name属性，对应的内容会替换指定了name属性的插槽

首先在子组件中给slot标签添加name属性

目前的页面是这样的

然后在父组件中用template标签包裹要添加的内容，并给template标签添加
v-slot：name(插槽的name属性)

目前的页面

可以看到对应的内容替换了对应name属性的插槽，这就是具名插槽的使用

具名插槽的简写形式

作用域插槽

slot插槽还替换了值传递功能，就是作用域插槽。

首先在子组件的插槽中绑定数据

然后在父组件中接收数据

目前的页面

如果要取其中的某个属性 就像使用对象的属性名一样的用法

目前的页面

目前的页面


目前的页面

也可以使用ES6的结构赋值去获取传递的值

目前的页面

结尾

插槽的大致用法就是这样，也可以上Vue官网再学习slot插槽的使用。