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>
    </TestSlot>
  </div>
</template>

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