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 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時，把不確定的、希望由用戶指定的部分定義為插槽。可以把插槽認為是組件封裝期間，為用戶預留的內(nèi)容的占位符。 -->
    <soltDemo>
      <template>
        <h4>自嘲</h4>
      </template>
      <template v-slot:slotParameter="slotData">
        <h5>作者：{{ slotData.userData.name }}</h5>
      </template>
      <template v-slot:slotBody>
        <p>本是后山人，偶做前堂客,</p>
        <p>醉舞經(jīng)閣半卷書，坐井說天闊。</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>