vue 插槽(slot)的使用方法

//  默认插槽<slot></slot>
// 子组件定义一个默认插槽

<template>
    <div>
        <div class="testSolt">
            <p class="title">普通插槽</p>
            <slot>默认的信息</slot>
        </div>
        <!-- 可以在子组件中定义多个默认插槽，并设置插槽的位置，父组件要插入的内容都会被填充到这些默认插槽中 -->
        <div style="margin-top:300px;background:#fff;height:100px;color:blue;">
            <slot>默认插槽的信息2</slot>
        </div>
    </div>
</template>

// 父组件引入并使用这个插槽

<template>
    <div>
        <children>
          <!-- 只要子组件中定义了slot，这里就可以通过p 标签将内容传给子组件并显示（子组件的slot 标签消失，父组件的p标签替换slot） -->
          <p>我是要显示的插槽信息</p>
        </children>
    </div>
</template>

<script>
import Children from "./children"
</script>

// 具名插槽<slot name="名称"></slot>
// 子组件中定义

<template>
    <div>
        <div class="testSolt">
            <p class="title">具名插槽</p>
            <!-- 给插槽加name 属性，就是所谓的具名插槽 -->
            <slot name="one"></slot>
            <slot name="two"></slot>
        </div> 
        <!-- 子组件也可以同时定义多个具名插槽 -->
        <div style="margin-top:300px;background:#fff;height:100px;color:blue;">
           <slot name="two"></slot>
        </div>
    </div> 
</template>

// 父组件引入并使用这个插槽

<template>
    <div>
        <children>
          <!-- 插槽里面同时可以插入一个组件 或者字符串内容等都可以 -->
          <template v-slot:one>
            <echarts/>
          </template>
          <template v-slot:two>
            我是要给two 插槽的信息
          </template>
        </children>
    </div>
</template>

<script>
import Children from "./children"
import Echarts from "./echarts"
</script>

// 作用域插槽<slot :自定义name=data中的属性或对象></slot>
// 子组件定义

<template>
    <div>
        <div class="testSolt">
            <p class="title">作用域插槽</p>
            <!-- 子组件中告诉父组件，要实现obj里的信息 -->
            <slot :obj="obj">默认信息</slot>
        </div> 
    </div> 
</template>

<script>
export default{
   name:'children',
   data(){
     return{
       obj:{
         msg:'我是msg',
         messge:'我是message'
       }
     }
   }
}
</script>

// 父组件中使用
// 如果子组件中只有一个作用域插槽时，父组件可以使用下边这种简单的写法，规范还是要加上template模板标签

<template>
    <div>
        <children v-slot="slotProps">
          <!-- 插槽里面同时可以插入一个组件 或者字符串内容等都可以 -->
          <!-- <template v-slot="slotProps"> -->
            <p>{{slotProps.obj.msg}}---{{slotProps.obj.message}}</p>
          <!-- </template> -->
        </children>
    </div>
</template>

<script>
import Children from "./children"
</script>

// 子组件定义

<template>
    <div>
        <div class="testSolt">
            <p class="title">作用域插槽1</p>
            <slot :obj="obj">默认信息</slot>
        </div> 
        <div class=""testSolt>
           <p class="title">作用域插槽2</p>
           <slot :obj="obj2"></slot>
        </div>
    </div> 
</template>

<script>
export default{
   name:'children',
   data(){
     return{
       obj:{
         msg:'我是msg',
         messge:'我是message'
       },

       obj2:{
         msg:'我是作用域插槽2的msg',
         messge:'我是作用域插槽2的message'
       }
     }

   }
}
</script>

// 父组件使用

<template>
    <div>
        <children>
          <template v-slot:default="slotProps"> 
            <p>{{slotProps.obj.msg}}---{{slotProps.obj.message}}</p>
          </template>
          <template v-slot:other="slotProps">
 <p>{{slotProps.obj2.msg}}---{{slotProps.obj2.message}}</p>
 </template>
 </children>
 </div>

</template> <script> import Children from "./children"
</script>