Vue中匿名、具名和作用域插槽有什么用

 oli

 footer
 content
 
 

另外，顺序并不重要，content 在 footer 下方但依然能够按照 slot 定义的顺序渲染：

作用域插槽

通常情况下普通的插槽是父组件使用插槽过程中传入东西决定了插槽的内容。但有时我们需要获取到子组件提供的一些数据，那么作用域插槽就排上用场了。 ?

在子组件中创建 slot 并通过 v-bind 绑定数据 prop 的形式传入数据：

在组件 data 中创建数据：

export default {
 name: 'MyComp',
 data () {
 return {
 data: { // 内部状态
 username: 'oli'
 }
 }
 }
}

这样就可以在插槽中访问到子元素的数据了：

{{user.data.username}}

也可以不书写 default 关键字，默认就是假定对应默认插槽

{{user.data.username}}

使用 v-slot 绑定一个命名空间 user，这样就可以通过 user 对象引用到子组件中传入的数据了

与具名插槽配合时，需要明确书写对应的命名空间：

{{user.data.username}}
{{user.data.username}}
# 代表 v-slot 的缩写，缩写在有参数的情况下才会生效

动态插槽名

另外，2.6 版本的 vue 还加入了动态插槽名的功能，用来动态的定义插槽名称：

https://cn.vuejs.org/v2/guide...

PS:Vue作用域插槽使用实例详解

这次给大家带来Vue作用域插槽使用详解，Vue作用域插槽使用的注意事项有哪些，下面就是实战案例，一起来看一下。

举个例子，比如我写了一个可以实现条纹相间的列表组件，发布后，使用者可以自定义每一行的内容或样式（普通的slot就可以完成这个工作）。而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数，具体看案例和注释。

 
 
  
  
  
 
 
  
   
    
    
     {{users[props.$index].id}}
     {{users[props.$index].name}}
     {{users[props.$index].age}}
     
     编辑
     删除
    
   
  

  
 

感谢各位的阅读！关于“Vue中匿名、具名和作用域插槽有什么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！