vue-9 插槽

<template>
  <div>
    <slot>
      <!-- 默认插槽 -->
      <h4>春晓</h4> 
    </slot>
    <!-- 具名带参插槽 -->
    <slot name="slotParameter" v-bind:userData="user">
      <h6 style="color: red">
        作者：{{ user.name }}
      </h6>
    </slot>
    <!-- 具名插槽 -->
    <slot name="slotBody">
      <h4 style="color: red">
      <p>春眠不觉晓，处处闻啼鸟。</p>
      <p>夜来风雨声，花落知多少。</p>
      </h4>
    </slot>
    
  </div>
</template>

<script>
export default {
  name:"soltDemo",
  data () {
    return {
      user:{
      name: "孟浩然",
      years:"唐",
      zname:"丁元英"
      }
      
    }
  }
}
</script>

<template>
  <div id="app">
    <!-- 插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。 -->
    <soltDemo>
      <template>
        <h4>自嘲</h4>
      </template>
      <template v-slot:slotParameter="slotData">
        <h5>作者：{{ slotData.userData.name }}</h5>
      </template>
      <template v-slot:slotBody>
        <p>本是后山人，偶做前堂客,</p>
        <p>醉舞经阁半卷书，坐井说天阔。</p>
        <p>大志戏功名，海斗量福祸,</p>
        <p>论到囊中羞涩时，怒指乾坤错。</p>
      </template>  
    </soltDemo>
  </div>
</template>

<script>
import soltDemo from './components/soltDemo.vue'

export default {
  name: 'App',
  data() {
    return {
      
    }
  },
  components: {
    soltDemo,
  }

}
</script>