vue中的插槽slot以及插槽向外傳值

1. vue 2.6.0版本之前的slot插槽： 用slot='' 替代表示對應的插槽。

<!--1.插槽組件中： 匿名插槽和具名插槽-->
<div>
    <slot></slot>
    <slot name='content'></slot>
</div>
 
<!--2. 使用插槽組件：-->
<child>
    <div></div>
    <div slot='content'></div>
</child>

2. vue 2.6.0版本之后的slot插槽： 用v-slot:default='ctx' 替代slot=''。

<!--1. 在slot插槽組件中：匿名插槽和具名插槽 以及向外拋值-->
<div class="test-slot">
     <slot :data1='data1'></slot>
     <slot name='main' :data2='data2'></slot>
</div>
<script>
export default {
    data(){
        return {
            data1:"我是匿名插槽",
            data2:"我是具名插槽"
        }
    }
}
</script>
 
<!--2. 在使用插槽組件：-->
<template>
  <div >
    <TestSlot>
      <template v-slot:default='ctx1'>{{ctx1.data1}}</template>
      <template v-slot:main='ctx2'>{{ctx2.data2}}</template>
　　　　或者這樣寫

　　　　　 <template slot-scope='ctx1'>{{ctx1.data1}}</template>

     　　<template #main='{ctx2}'>{{ctx2.data2}}</template>

    </TestSlot>
  </div>
</template>
 
<script>
import TestSlot from "@/components/test-slot.vue"
export default {
  components:{
    TestSlot
  }
}
</script>

 

 

 

來源:https://blog.csdn.net/qq_42231156/article/details/107053267