一仔役、基本使用

子組件 childComponent.vue

<template>
    <div>
      <slot name="isscope" :data="data" />
    </div>
</template>
<script>
export default {
  name: 'childComponent',
   ... ...
}
</script>

父組件 parentComponent.vue

<template>
  <childComponent>
    // 寫法一：通過slot-scope來獲取子組建的值
    <span slot="isscope" slot-scope="item">
        父組件拿值{{item}}
    </span>
    // 寫法二：# 等價于 v-slot察皇，#isscope => v-slot:isscope, #isscope="子組件值" => v-slot:isscope="子組件值"
    <template #isscope="item">
        父組件拿值{{item}}
    </template> 
  </childComponent>
</template>
<script>
export default {
  name: 'parentComponent',
   ... ...
}
</script>

二、v-slot指令動態(tài)綁定屬性

子組件 childComponent.vue

<template>
    <div>
      <slot name="test1" :data="data" />
      <slot name="test2" :data="data" />
      <slot :data="data" />
    </div>
</template>
<script>
export default {
  name: 'childComponent',
   ... ...
}
</script>

2.1泥畅、父組件豌骏，單個變量名使用

<template>
  <childComponent>
    <template v-slot:[slotName]>
        父組件
    </template>
  </childComponent>
</template>
<script>
export default {
  name: 'parentComponent',
  data() {
    return {
      slotName: 'test1'
    }
  }
}
</script>

2.2、父組件汁蝶，循環(huán)變量名使用

<template>
  <childComponent>
    <template v-for="(name, index) in slotNames" v-slot:[name]="item">
          <div :key="index">
              父組件拿值{{item}}
          </div>
      </template>
  </childComponent>
</template>
<script>
export default {
  name: 'parentComponent',
  data() {
    return {
      slotNames: [ 'test1', 'test2', 'default']
    }
  }
}
</script>

三渐扮、組件套組件插槽使用

子組件 childComponent.vue

<template>
    <div>
      <slot name="test1" :data="data" />
      <slot name="test2" :data="data" />
      <slot :data="data" />
    </div>
</template>

父組件 parentComponent.vue

<template>
  <childComponent>
    <template v-for="(name, index) in slotNames" v-slot:[name]="item">
          <div :key="index">
              父組件拿值{{item}}
          </div>
      </template>
  </childComponent>
</template>
<script>
export default {
  name: 'parentComponent',
  data() {
    return {
      slotName:  [ 'test1', 'test2', 'default']
    }
  }
}
</script>

爺爺組件 grandpaComponent.vue

<template>
  <parentComponent>
      // 方法一
      <span slot="test1" slot-scope="item">
          爺爺組件拿值{{item}}
      </span>
    // 方法二
    <template #test1="item">
        爺爺組件拿值{{item}}
      </template> 
  </parentComponent>
</template>
<script>
export default {
  name: 'grandpaComponent',
  ... ...
}
</script>