平武建站

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

这篇文章给大家分享的是有关Vue中匿名、具名和作用域插槽有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联主打移动网站、网站设计制作、做网站、网站改版、网络推广、网站维护、主机域名、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。

匿名插槽

子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去。 

这里定义了一个默认插槽，只要往里头丢东西，就会被加入到这个插槽里面

slot 元素里面可以加入一系列后备内容，一旦父元素没有插入任何信息，那么就会渲染后备内容。


 oli

如在父组件中使用这个子组件，并插入 oli 字符串，效果如下：

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

具名插槽

具名插槽可以出现在不同的地方，不限制出现的次数。只要匹配了 name 那么这些内容就会被插入到这个 name 的插槽中去。

比如上述代码定义了三个具名插槽。在父组件中即可使用 slot 属性插入到对应的插槽中：


 footer
 content
 
 

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

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

作用域插槽

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

在子组件中创建 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传递过来的参数，具体看案例和注释。


 
 
  
  Vue作用域插槽
  
 
 
  
   
    
    
     {{users[props.$index].id}}
     {{users[props.$index].name}}
     {{users[props.$index].age}}
     
     编辑
     删除
    
   
  

  
 

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


分享名称：Vue中匿名、具名和作用域插槽有什么用
分享地址：http://pwwzsj.com/article/gisepi.html

其他资讯