作用域插槽丶具名插槽丶默认插槽

Vue.js组件：理解默认、具名及作用域插槽的使用

最新推荐文章于 2024-09-09 09:21:31 发布

原创最新推荐文章于 2024-09-09 09:21:31 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #ecmascript

这篇博客详细介绍了Vue.js中组件的默认插槽、具名插槽和作用域插槽的使用方法。通过示例代码展示了如何在父组件中插入内容到子组件的不同类型的插槽，并解释了如何处理作用域插槽的数据。重点强调了当默认插槽和作用域插槽一起使用时，需给作用域插槽具名，否则可能导致预期之外的渲染顺序。同时，提供了一种查找他人组件中作用域插槽名称的方法，以便正确地传递和显示数据。

子级代码:

<template>
  <div>
      <slot></slot> //默认
      <slot name='title1'></slot> //具名
      <slot :nme="num"></slot>//作用域
// 备注的是第二种写法 
// 一般情况下作用域插槽都是默认的.但是当你设定了默认插槽同时又使用作用域插槽.
// 这个时候我们才给作用域插槽添加一个名字.
      <!-- <slot :nme="num" name="hello"></slot> -->
  </div>
</template> 
<script>
export default {
   data(){
    return{
      num:[1,2,3,4,5,6,7,8,'作用域插槽']
    }
   }
}
</script>

<style>

</style>

父级代码:

<template>
  <div>
//默认插槽
        <use01>
          <p>默认插槽</p>
        </use01>
//具名插槽
        <use01>
        <template #title1>
            <p>具体名插槽</p>
        </template>
          </use01>
//作用域插槽
          <use01>
       <template v-slot='abc'>
         <div>{{ abc.nme }}</div>
        </template>
        </use01>

// 备注的是第二种写法  作用域插槽下的具名插槽
         <!-- <use01>
      <template v-slot:hello="abc">
        <div>{{ abc.nme }}</div>
      </template>
    </use01> -->
  </div>
</template>

<script>
import use01 from '../components/01.vue'
export default {
   components:{
       use01
   }
}
</script>

<style>

</style>

输出结果:

默认插槽

默认插槽

具体名插槽

[ 1, 2, 3, 4, 5, 6, 7, 8, "作用域插槽" ]

注意:

作用域插槽在没用使用具名的时候和默认插槽一起使用,会先执行一次默认插槽,再执行作用域插槽.

本质上作用域插槽也算是默认插槽.也可以当默认插槽使用.

代码如下:

子级:

<template>
  <div>
      <slot></slot>
      <slot name='title1'></slot>
      <!-- <slot :nme="num"></slot> --> //这里是隐去的部分
      <slot :nme="num" name="hello"></slot>
  </div>
</template> 
<script>
export default {
   data(){
    return{
      num:[1,2,3,4,5,6,7,8,'作用域插槽']
    }
   }
}
</script>

<style>

</style>

父级:

<template>
  <div>
        <use01>
          <p>默认插槽</p>
        </use01>
        <use01>
        <template #title1>
            <p>具体名插槽</p>
        </template>
          </use01>

          <!-- <use01>
       <template v-slot='abc'>
         <div>{{ abc.nme }}</div>
        </template>
        </use01> --> //这里是隐去的部分

         <use01>
      <template v-slot:hello="abc">
        <div>{{ abc.nme }}</div>
      </template>
    </use01>
  </div>
</template>

<script>
import use01 from '../components/01.vue'
export default {
   components:{
       use01
   }
}
</script>

<style>

</style>

输出结果:

默认插槽

具体名插槽

[ 1, 2, 3, 4, 5, 6, 7, 8, "作用域插槽" ]

总结:

使用作用域插槽的时候不要使用默认插槽.如果一起使用,必须给作用域插槽具名.

在引入别人的插槽内容的时候不知道具体使用了什么名字怎么办

通过以下下面具体方法可以查找到.

子级代码: 或者他人的组件.或者其他

<template>
  <div>
         <use01>
      <template v-slot:hello="abc">
//这里不知道具名是什么.就直接使用自己定义的名字.然后打开终端执行
        <div>{{ abc }}</div>
      </template>
    </use01>
  </div>
</template>

<script>
import use01 from '../components/01.vue'
export default {
   components:{
       use01
   }
}
</script>

<style>

</style>

得到结果如下:

{ "a": [ 1, 2, 3, 4, 5, 6, 7, 8, "作用域插槽" ] }

这个时候"a":就是对方提供的具体名字.然后将他添加到自己的代码中


<use01>
<template v-slot:hello="abc">
<div>{{ abc.a }}</div>
</template>
</use01>