Vue作用域插槽怎么使用

今天小编给大家分享一下Vue作用域插槽怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

简单的展示列表

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

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

<template> <div class="list">  <div class="list-title">   <slot name="title"></slot>  </div>  <div class="list-content">   <slot name="content"></slot>  </div> </div></template><script> export default {  name: "MyList" }</script>

在父组件中使用MyList

<template> <MyList>  <span slot="title">title</span>  <ul slot="content">   <li v-for="item in listData">{{item}}</li>  </ul> </MyList></template><script> import myList from './List.vue'; export default {  name: 'HelloWorld',  components: {   'MyList': myList  },  data() {   return {    listData: [      '列表项1',      '列表项2',      '列表项3'    ]   }  } }</script>

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

使用prop来传递数据

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

列表组件第二版：

<template> <div class="list">  <div class="list-title">{{title}}</div>  <ul class="list-content">   <li v-for="(item ,index) in content" :key="index">{{item}}</li>  </ul> </div></template><script> export default {  name: "MyList",  props: {   title: {    type: String,    required: true   },   content: {    type: Array,    required: true   }  } }</script>

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

<template> <div>  <MyList title="标题1" :content="listData"></MyList>  <MyList title="标题2" :content="newListData"></MyList> </div></template><script> import myList from './List.vue'; export default {  name: 'HelloWorld',  components: {   'MyList': myList  },  data() {   return {    listData: [      '列表项1',      '列表项2',      '列表项3'    ],    newListData: [      '新的列表项1',      '新的列表项2',      '新的列表项3'    ],   }  } }</script>

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

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

作用域插槽

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

<template> <div class="list">  <div class="list-title">{{title}}</div>  <ul class="list-content">   <li v-for="(item ,index) in content" :key="index">    <!--这里将content中的每一项数据绑定到slot的item变量上，在父组件中可以获取到item变量-->    <slot :item="item">{{item}}</slot>   </li>  </ul> </div></template>

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

<template> <div>  <MyList title="标题1" :content="listData1"></MyList>  <MyList title="标题2" :content="listData2">   <template slot-scope="scope">    <img :src="scope.item.img" width="20">    <span>{{scope.item.text}}</span>   </template>  </MyList>  <MyList title="标题3" :content="listData3">   <template slot-scope="scope">    <b>{{scope.item.prefix ? '有前缀' : '无前缀'}}</b>    <span>{{scope.item.text}}</span>    <span>{{scope.item.remark}}</span>   </template>  </MyList> </div></template><script> import myList from './List.vue'; export default {  name: 'HelloWorld',  components: {   'MyList': myList  },  data() {   return {    listData1: [     '列表项1',     '列表项2',     '列表项3'    ],    listData2: [     {text: '第二个列表的列表项1', img: 'example.png'},     {text: '第二个列表的列表项2', img: 'example.png'},     {text: '第二个列表的列表项3', img: 'example.png'}    ],    listData3: [     {text: '第三个列表的列表项1', prefix: true, remark: '附加的备注1'},     {text: '第三个列表的列表项2', prefix: false, remark: '附加的备注2'},     {text: '第三个列表的列表项3', prefix: true, remark: '附加的备注3'}    ],   }  } }</script>

为什么要使用Vue

Vue是一款友好的、多用途且高性能的javascript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的html、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

以上就是“Vue作用域插槽怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。