slot-scope和#default是Vue中用于定义插槽的两种不同语法,它们在Vue 2和Vue 3中有不同的应用场景和语法规则。
slot-scope
在Vue 2.x中,slot-scope是用于声明具名插槽并获取父组件传递过来的数据的主要方式。通过slot-scope可以定义一个变量scope,该变量包含了当前行的数据(row)、列数据(column)和行索引($index)等属性。例如:
<el-table-column label="性别"><template slot-scope="scope">{{ scope.row.gender ? '男' : '女' }}</template>
</el-table-column>
在这种写法中,slot-scope是标准的具名插槽数据访问方式,适用于Vue 2项目1。
#default
在Vue 3.0中,#default是具名插槽的语法糖,提供了一种更简洁的方式来访问插槽数据。通过解构赋值,可以直接从插槽的作用域上下文中提取出需要的属性。例如:
<el-table-column label="性别"><template #default="{ row }">{{ row.gender ? '男' : '女' }}</template>
</el-table-column>
这种写法在需要提取多个属性时更加清晰和简洁,尤其是当需要访问index时,可以写成`template #default="{ row, $index }"`1。
使用场景和语法区别
- slot-scope:适用于Vue 2项目,是标准的具名插槽数据访问方式。如果项目使用Vue 2框架,必须使用slot-scope来实现对el-table单元格内容的自定义1。
- #default:适用于Vue 3项目,提供了更简洁的语法糖,尤其适合需要提取多个属性的场景。这种新的语法让代码看起来更加简洁,尤其是在需要提取多个属性时,解构赋值的方式更加清晰1。