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了,写列一下之前组件的代码。
之前组件调用
展示效果 步骤为了实现代办事项增加对勾效果,我们要在data中调整数据结构,新增 理解插槽和数据传递自己在看别人的帖子比较吃力的地方就是弄不清楚这个插槽作用域到底是什么,有什么功能,我用大白话来屡屡思路。 弄清楚两个问题
那传递步骤是
我们之前给数据数据增加了
接下来是父组件调用子组件的slot和 之前组件调用
{{ slotProps.itemValue.test }}
效果如下 附实例代码: 总结 其实作用域插槽很类似于入参函数,组件相当于cb,而cb的入参就相当与slotProps接收的参数,只不过名称和形式变了个样子。
function foo(str,cb){
var msg = str + '你好';
cb(msg);
}
foo('愚坤',function(msg){
alert(msg)
})
foo('愚坤',function(msg){ 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |