vue slot插槽

 

 插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽，可以把插槽认为是组件封装期间，为用户预留的内容的占位符，适用于父组件→子组件，$slots是组件插槽集，是组件所有默认插槽、具名插槽的集合，可以用来获取当前组件的插槽集。

插槽可以分为：

1. 默认插槽
2. 具名插槽
3. 作用域插槽

应用如下：

 

1. 默认插槽

　　　　父组件：

<template>
    <div class="container">
        <!--默认插槽-->
        <!--写在标签上的是父组件以props形式向子组件传递的属性,与插槽无关-->
        <Category title="美食" :listDate="foods">
            <!--希望向子组件中插入的内容-->
            <img src="img1.jpg">
        </Category>
    </div>
</template>

<script>
    import Category from './components/Category'
    export default{
        name:'App',
        components:{Category}
    }
</script>

//子组件
<template>
    <div class="category">
        <slot></slot>
    </div>
</template>
<script>
    export default{
        name:'Category'
    }
</script>

2.具名插槽:默认插槽是特殊的具名插槽

//父组件
<template>
    <div class="container">
        
        <Category title="美食" :listDate="foods">
            <!--添加名称-->
            <template v-slot:center>
                <img src="img1.jpg">
              </template>
            <!--添加名称-->
            <template v-slot:footer>
                <a href="www.baidu.com">百度</a>
              </template>
        </Category>
        
    </div>
</template>

<script>
    import Category from './components/Category'
    export default{
        name:'App',
        components:{Category}
    }
</script>

//子组件
<template>
    <div class="category">
        <!--指定名称-->
        <slot name="center"></slot>
        <!--指定名称-->
        <slot name="footer"></slot>
    </div>
</template>
<script>
    export default{
        name:'Category'
    }
</script>

 作用域插槽：

当数据在组件的自身，而根据数据生成的结构需要组件的使用者来决定时，就要用作用域插槽。

//子组件
<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <slot :obj1="obj1" name="one"></slot>
    <slot :obj2="obj2" name="two"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj1: {
        name: 'one slot'
      },
      obj2: {
        name: 'two slot'
      }
    }
  }
}
</script>

//父组件你
<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
        <template v-slot:one="slotProps">
          <h2>{{slotProps.obj1.name}}</h2>
        </template>
        <template v-slot:two="twoSlotProps">
          <h2>{{twoSlotProps.obj2.name}}</h2>
        </template>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
    }
  }
}
</script>