vue 插槽scope_Vue作用域插槽slot-scope实例代码

vue中的插槽有三种：单个插槽、具名插槽、作用域插槽，这个在官网上能看到

作用域插槽简单来说就是父组件只管显示样式，数据由子组件来提供。比如上面的代码，el-table-column内的template是传递给其内部solt的显示内容，但是scope的值是由el-table-column内部solt绑定的数据返回的。这个数据具体是什么由el-table-column中指定，类似：

export default {

data: function(){

return {

data: ['1','2','3','4','5','6']

}

},

}

而scope就是上面代码中的data。

昨天看vue的官网文档，在slot-scope这块不是特别的明白，今天自己做了一个小例子，便于理解。

先说一下我们假设的应用常用场景，我们已经开发了一个代办事项列表的组件，很多模块在用，现在要求在 不影响已测试通过的模块功能和展示 的情况下，给 已完成的代办项增加一个对勾效果 。

也就是说，代办事项列表组件要满足一下几点

之前数据格式和引用接口不变，正常展示

新的功能模块增加对勾

解决办法很多，不过为了解释组件作用域插槽，我们就用slot-scope了，写列一下之前组件的代码。

todo-list.vue 组件

• { { item.test }}

ex