Vue3.0 组件的核心概念_插槽

//  父组件
<p slot="item">old Nian糕</p>

// 子组件
<slot name="item" />

// 父组件
<template v-slot:item>
  <p>new Nian糕</p>
</template>

// 子组件
<slot name="item" />

//  父组件
<p slot="love" slot-scope="props">爱{{ props.name }}真是太好了</p>

// 子组件
<slot name="love" v-bind="{ name }" />

export default {
  data() {
    return {
      name: "Nian糕"
    }
  }
}

//  父组件
<template v-slot:love="props">
  <p>爱{{ props.name }}真是太好了</p>
</template>

// 子组件
<slot name="love" v-bind="{ name }" />

export default {
  data() {
    return {
      name: "Nian糕"
    }
  }
}