Vue作用域插槽应用实例分析

本篇内容主要讲解“Vue作用域插槽应用实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue作用域插槽应用实例分析”吧!

创新互联企业建站,10年网站建设经验，专注于网站建设技术，精于网页设计，有多年建站和网站代运营经验，设计师为客户打造网络企业风格，提供周到的建站售前咨询和贴心的售后服务。对于成都网站制作、网站建设、外贸网站建设中不同领域进行深入了解和探索，创新互联在网站建设中充分了解客户行业的需求，以灵动的思维在网页中充分展现，通过对客户行业精准市场调研，为客户提供的解决方案。

简单的展示列表

现在我们做一个纯展示用途的列表组件，如下图所示：

第一个例子先用slot来分发内容

在父组件中使用MyList

省略了其中的样式代码，结果如图所示

满足了基本的需求，但是作为组件的使用者，这样的一个组件会让我觉得非常麻烦，content中循环的逻辑还需要我自己动手来写，这样的使用毫无便利性。于是有了下面第二个版本

使用prop来传递数据

因为考虑到列表的内容总是一个数组，我把循环结构写进了组件中

列表组件第二版：

使用起来也非常方便，只需通过prop将数据传入组件中

改进之后，每当我使用组件只需一行代码，大大简化了工作量

易用性的需求也满足了，但现在又有了新的问题，组件的拓展性不好！每次只能生成相同结构的列表，一旦业务需求发生了变化，组件就不再适用了。比如我现在有了新的需求，在一个列表的每个列表项前加入了一个小logo，我总不可能又写一个新的组件来适应需求的变化吧？假如需要更多的定制化场景呢？

作用域插槽

这里就有了第三版的列表组件，使用作用域插槽将子组件中的数据传递出去 

使用组件时，将业务所需的content模板传入

  
  
   
    {{scope.item.prefix ? '有前缀' : '无前缀'}}
    {{scope.item.text}}
    {{scope.item.remark}}