vue插槽的使用

插槽使用：

父组件

<template>
  <div>
    <sonA>
      <template v-slot:header>
       <span>我是头部内容</span>
      </template>

      <template>
        <span>我是中间内容</span>
      </template>

      <template #footer>
        <span>我是底部内容</span>
      </template>
    </sonA>
  </div>
</template>

<script>
import sonA from '../components/sonA'
export default {
  name: "slots",
  data(){
    return {

    }
  },
  components:{
    sonA
  }
}
</script>

<style scoped>

</style>

子组件

<template>
  <div>
    <slot name="header"></slot>
    <br>
    <slot></slot>
    <br>
    <slot name="footer"></slot>
  </div>
</template>

<script>
export default {
  name: "sonA"
}
</script>

<style scoped>

</style>

作用域插槽：

开发中，遇到子组件拿到数据，要作用在父组件上，可以使用作用域插槽。

父组件：

<template>
  <div>
    <sonA>
      <template v-slot:header="{scoped}">
       <span>{{scoped.header}}</span>
      </template>

      <template #default="{scoped}">
        <span>{{scoped.middle}}</span>
      </template>

      <template #footer="{scoped}">
        <span>{{scoped.footer}}</span>
      </template>
    </sonA>
  </div>
</template>

<script>
import sonA from '../components/sonA'
export default {
  name: "slots",
  data(){
    return {

    }
  },
  components:{
    sonA
  }
}
</script>

<style scoped>

</style>

子组件：

<template>
  <div>
    <div v-for="(item,index) in list" :key="index">
      <slot :scoped="item" name="header"></slot>
      <br>
      <slot :scoped="item" name="default"></slot>
      <br>
      <slot :scoped="item" name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "sonA",
 data(){
    return {
      list:[{header:'我是头部内容',middle:'我是中间内容',footer:'我是底部内容'}]
    }
 }
}
</script>

<style scoped>

</style>

也可以用解构的方式：

<template>
  <div>
    <sonA>
      <template v-slot:header="{scoped}">
       <span>{{scoped}}</span>
      </template>

      <template #default="{scoped}">
        <span>{{scoped}}</span>
      </template>

      <template #footer="{scoped}">
        <span>{{scoped}}</span>
      </template>
    </sonA>
  </div>
</template>

<script>
import sonA from '../components/sonA'
export default {
  name: "slots",
  data(){
    return {

    }
  },
  components:{
    sonA
  }
}
</script>

<style scoped>

</style>

<template>
  <div>
    <div v-for="({header,middle,footer},index) in list" :key="index">
      <slot :scoped="header" name="header"></slot>
      <br>
      <slot :scoped="middle" name="default"></slot>
      <br>
      <slot :scoped="footer" name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "sonA",
 data(){
    return {
      list:[{header:'我是头部内容',middle:'我是中间内容',footer:'我是底部内容'}]
    }
 }
}
</script>

<style scoped>

</style>