Vue中的插槽Slot使用方法和具名插槽

单个插槽的使用方法

父组件

<template>
  <Slot>
    <p>我是插入内容</p>
  </Slot>
</template>
<script>
import Slot from './components/slot.vue'
export default {
  components: {
    Slot
  }
}
</script>

子组件

<template>
<h1>{{ title }}</h1>
<slot />
<div>{{ content }}</div>
</template>
<script>
export default {
    data() {
        return {
            title: '我是标题',
            content: '我是内容'
        }
    }
}
</script>

具名插槽(插入多个slot)的使用方法

父组件

<template>
  <Slots>
    <template v-slot:first>
      <p>我是插入内容1</p>
    </template>
    <template v-slot:two>
      <p>我是插入内容2</p>
    </template>
  </Slots>
</template>
<script>
import Slots from './components/slots.vue'
export default {
  components: {
    Slots
  }
}
</script>

子组件

<template>
<h1>{{ title }}</h1>
<slot name="first">我是默认插槽内容1</slot>
<div>{{ content }}</div>
<slot name="two">我是默认插槽内容2</slot>
</template>
<script>
export default {
    data() {
        return {
            title: '我是标题',
            content: '我是内容'
        }
    }
}
</script>