Vue插槽slot

使用了那么久的vue，到现在才知道vue自带的组件插槽slot，说真的，插槽的作用在一些场景下非常有用。

插槽分为单个插槽、具名插槽、作用域插槽。其中作用域插槽会稍显复杂。

单个插槽：

子组件testSlot.vue：

<template>
  <div class="">
    <p>子组件共有的</p>
    <slot></slot>
    <p>子组件共有的</p>
  </div>
</template>

父组件：

引入import sonSlot from"./testSlot";

注册：components: {sonSlot}

父组件使用：

<sonSlot>
  <p>我是父组件内容，会替换子组件slot插槽的内容</p>
  <span>测试多个父组件内容怎么替换子组件slot插槽内容</span>
</sonSlot>

效果：

具名插槽：

子组件testSlot.vue：

<template>
  <div class="">
    <p>子组件共有的</p>
    <slot></slot>
    <slot name="one"></slot>
    <slotname="two"></slot>
    <p>子组件共有的</p>
  </div>
</template>

父组件：

引入import sonSlot from"./testSlot";

注册：components: {sonSlot}

父组件使用：

<sonSlot>
  <p>我是父组件内容，会替换子组件slot插槽的内容</p>
  <span>测试多个父组件内容怎么替换子组件slot插槽内容</span>
  <p slot="one">我是父组件，会替换插槽name为one的内容</p>
  <p slot="two">我是父组件，会替换插槽name为two的内容</p>
</sonSlot>

作用域插槽：简单理解就是子组件传递数据给父组件

子组件testSlot.vue：

<template>
  <div class="">
    <slot:test="test"></slot>
    <slot name="one":one="slotOne"></slot>
  </div>
</template>
data() {
  return {
    test: '我是子组件test数据',
    slotOne: '我是子组件slotOne数据'
  }
}

父组件：

引入import sonSlot from"./testSlot";

注册：components: {sonSlot}

父组件使用：

<sonSlot>
  <pslot-scope="tt">{{tt.test}}</p>
  <p slot="one"slot-scope="slotOne">我是父组件，插槽name为one的内容{{slotOne.one}}</p>
</sonSlot>

作用域插槽传递数据跟父组件传递给子组件差不多。

欢迎关注Coding个人笔记 公众号