使用vue3的插槽遇到的问题

943 阅读1分钟

 今天在做页面表格的时候遇到个问题。平时开发的过程中我们都会将element的表格进行二次封装,使用的时候传入

在vue2中我的话进行了如下二次封装,具体的代码大家都可以看懂

那么我们在使用的时候传入所需要的数据即可

如果遇到需要自定义的列,我们传入column的时候定义下

然后再页面中使用插槽即可,如下

那么问题来了,在使用了vue3的项目中,像上面这样操作,插槽的内容并没有渲染出来,查询了下,原来是在vue3中插槽的使用方法和vue2有了一些变化,下面贴出代码,在其中无法再使用slot-scope="scope",那么就无法像之前那样获得这行的数据,我们可以像下面这样使用name还是去定义对应插槽的名字,通过v-bind去绑定需要传递出去的数据如下图中的:column,

那么,我们在父组件使用的时候就可以获取数据,如下代码

像上图这样就可以获取到了