Vue插槽的使用

3.Vue插槽slot

• 插槽的作用：插槽一般是在子组件中使用，提供给父组件一个展示数据的位置，表示，父组件可以在这个占位符中填充任何模板代码，填充的内容会替换子组件中，插槽的使用，让开发者可以拓展组件，去更好的复用组件和对组件做定制化处理，可以让组件变得更加灵活

• 组件插槽

  • 组件里要显示什么标签内容, 我们就传入给组件
  • 在中写的就是默认样式，如果组件中没有传入标签的话，就会显示默认样式

• 具名插槽

  • 如果子组件有多个插槽时，一个组件只能有一个匿名插槽，slot有一个属性是 name ，可以给插槽取名，这时父组件要将填充的内容与子组件中进行替换，就要结合标签和v-slot:name找到对应的插槽进行替换。
  • v-slot : =#
  • 子组件

  <template>
    <div>
   <h1>我是具名插槽one</h1>
   <slot name="one">123</slot>
   <h1>我是具名插槽two</h1>
   <slot name="two">890</slot>
   <h1>我是具名插槽three</h1>
   <slot name="three">aaa</slot>
   <h4>我是具名插槽的默认样式</h4>
   <slot>123456879</slot>
    </div>
  </template>
  

  • 父组件

  <template>
    <div id="app">
      <h3>插槽的使用</h3>
       <Pannel2>
         <template v-slot:one>222</template>
         <template #two>456</template>
         <template #three>一生一世一双人，半梦半醒半浮生</template>
         <template></template>
       </Pannel2>
    </div>
  </template>
  

  

• 作用域插槽

  • 应用场景:子组件里值, 在给插槽赋值时在父组件环境下使用
  • 在子组件的上自定义一个动态属性(如:cur)，把父组件要使用的值传给动态属性(例如:cur=‘变量’)；父组件要在标签上添加v-slot=‘变量名’，变量名中就用子组件传过来的数据==(变量上会绑定slot身上属性和值)==。
  • 子组件

  <template>
    <div>
    <h4>作用域插槽</h4>
    <slot  :cur='arr'>{{arr[0].name}}</slot>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return {
              isShow: true,
              arr:[
                {name:'胖丁'},
                {name:'芳芳'},
                {name:'猪头'},
                {name:'饭桶'}
              ]
          }
      },
  

  • 父组件

  <template>
    <div>
       <Pannel>
         <template v-slot='ab'>{{ab.cur[2].name}}</template>
       </Pannel>
    </div>
  </template>
  

• 如果子组件有多个作用域插槽，那么v-slot可以简写成v-slot:name = ‘变量名’

  [外链图片转存中...(img-OnmWAXzx-1617012401882)]\cacaoimg\Snipaste_2021-03-29_17-59-00.png)

- 如果子组件有多个作用域插槽，那么v-slot可以简写成v-slot:name = '变量名'