vue的插槽

前言

插槽在使用vue开发项目中的使用频率还是挺高的，不管是自定义组件还是引用的UI组件库，插槽的使用可以一定程度上提示组件的可拓展性等。

一、具名插槽

使用场景：单纯的想在父组件内自定义子组件的内容结构。

// 父组件App
<template>
  <div id="app">
    <my-slot>
      {{value}}
    </my-slot>
  </div>
</template>

<script>
import MySlot from './components/MySlot.vue'
export default {
  name: 'app',
  data() {
    return {
      value: 'hello world'
    }
  },
  components: {
    MySlot
  }
}
</script>

// 子组件MySlot
<template>
    <div>
        <slot></slot>
    </div>
</template>

二、作用域插槽

使用场景：更改子组件对应作用域的内容。

// 父组件App
<template>
  <div id="app">
    <my-slot>
      <template v-slot:mySlot>
        <div>
          {{value}}
        </div>
      </template>
    </my-slot>
  </div>
</template>

<script>
import MySlot from './components/MySlot.vue'
export default {
  name: 'app',
  data() {
    return {
      value: 'hello world'
    }
  },
  components: {
    MySlot
  }
}
</script>

// 子组件MySlot
<template>
    <div>
        <slot name='mySlot'></slot>
    </div>
</template>

三、子组件通过作用域插槽传递参数到父组件

使用场景：需要在父组件自定义内容中使用子组件的数据。

// 父组件App
<template>
  <div id="app">
    <my-slot>
      <template v-slot:mySlot='{childValue, one}'>
        <div>
          {{value}}
          {{childValue}}
          {{one}}
        </div>
      </template>
    </my-slot>
  </div>
</template>

<script>
import MySlot from './components/MySlot.vue'
export default {
  name: 'app',
  data() {
    return {
      value: 'hello world'
    }
  },
  components: {
    MySlot
  }
}
</script>

// 子组件MySlot
<template>
    <div>
        <slot name='mySlot' :childValue='childValue' :one='one'></slot>
    </div>
</template>

<script>
export default {
    name: 'MySlot',
    data() {
        return {
            childValue: 'It is child value',
            one: 'one'
        }
    }
}
</script>

后话

vue@2.6.0版本废弃了slot、slot-scope，都推荐使用v-slot，具体可以前往cn.vuejs.org/v2/api/?#sl…查看更多详细内容。