Vue2.X—Slot(内容、具名、作用域)插槽代码实例

父组件

<template>
<div class="parent">
    <!-- 内容插槽 后备插槽（默认插槽） -->
    <slot-a>
      内容插槽 hello world {{name}}
    </slot-a>
    <!-- 具名插槽 -->
    <slot-b>
      <!-- <slot-name> -->
        <template v-slot:header>具名插槽 我是新的header<br/></template>
        
        <template v-slot:main>哈哈哈哈<br/></template>
        
        <template v-slot:default>我是默认的<br/></template>
        <template v-slot:footer>我是新的footer<br/></template>
        <template v-slot:test="info">{{ info.info }}</template>     
        <!-- 具名插槽的缩写(2.6.0新增)    -->
        <template #info></template>  
      <!-- </slot-name> -->
    </slot-b>
    <!-- 作用域插槽 -->
    <!-- 可以把 :default 去掉，仅限于默认插槽 -->
    <!-- <slot-c v-slot="slotProps">
      {{slotProps.usertext.firstName}}
    </slot-c> -->
    <!-- 多个插槽 -->
    <slot-c>
      <template v-slot:main="slotProps">
        {{ slotProps.usertext.firstName }}
      </template>

      <!-- <template v-slot:other="otherSlotProps">
        {{ otherSlotProps.usertext.lastName }}
      </template> -->
      <!-- 解构插槽Prop -->
      <template v-slot:other={usertext}>
        {{ usertext.lastName }}
      </template>
    </slot-c>
</div>

子组件

SlotA.vue

<template>
    <span>
        <slot>Submit</slot>
    </span>
</template>

<script>
export default {

}
</script>

<style>

</style>

SlotB.vue

	<template>
  <div>
    <slot name="header">我是header</slot>

    <slot name="main">我是main</slot>

    <slot></slot>

    <slot name="footer"></slot>

    <slot :info="info" name="test"></slot>

    <slot name="info"></slot>
   </div>
</template>

<script>
export default {
    data() {
        return {
            title:{
                age:16
            },
            info:"具名插槽的缩写(2.6.0新增)"
        }
    }
}
</script>

<style>

</style>

SlotC.vue

<template>
  <div>
    <!-- 设置默认值：{{user.lastName}}获取 Jun -->
	<!-- 如果home.vue中给这个插槽值的话，则不显示 Jun -->
	<!-- 设置一个 usertext 然后把user绑到设置的 usertext 上 -->
	<slot :usertext="user" name="main"></slot>
    <slot :usertext="user" name="other"></slot>
  </div>
</template>

<script>
export default {
    data(){
        return{
            user:{
                firstName:"Fan",
                lastName:"Jun"
            }
        }
    }
}
</script>

<style>

</style>