使用场景:比如我们需要在table的某一列中使用input输入并同时更新table的data。而其他列则是展示数据即可。
解决方案:我们可以使用slot来插入自定义元素,并且处理元素中的数据与table的data之间的关系。
封装组件:
...
//1. 建议使用这种写法,这样不需要在使用的时候再次解构对象。
// scope是table中的作用域中的值,一般使用scope.row获取当前列数据。
<template slot-scope="scope">
// scopeName是配置传过来的任意名,这里使用了动态slot。
<template v-if="scope.row.scopeName">
// 通过属性绑定,将scope返回给父组件,子传父,解决了列中单独处理某个列的值的问题。
<slot :name="scope.row.scopeName" :params="scope.row"></slot>
</template>
</template>
//2. 整个scope传入
<template slot-scope="scope">
<template v-if="scope.row.scopeName">
<slot :name="scope.row.scopeName" :params="scope"></slot>
</template>
</template>
...
父组件中使用:
...
// 1. scope.row传过来
// slot="具名slot" slot-scope="具名slot作用域的值"
<template slot="aaa" slot-scope="params">
{{params}}
</template>
// 2. 直接整个scope传过来,对象解构
<template slot="aaa" slot-scope="{params}">
{{params}}
</template>
// 3. 简写 #slotName="传回来的变量",建议使用该写法。
// 这里的params与上面的:params同名即可。
<template #aaa="params">
{{params}}
</template>
...