VUE中“：”、“@”、“#”

自己老犯错，记录一下

“：”：表示v-bind的缩写，用于数据绑定

“@”：表示v-on的缩写，用于监听事件

“#”：表示v-slot的缩写，用于插槽，简单理解为占坑，有需要的时候将元素放入坑中

插槽不太理解，举个栗子给自己看

情况一：直接拿到scope中的row的值

情况二：拿到scope整个的值，scope来自于外层的表单数据

情况三：不需要传值

<el-table-column  label="状态" width="120">
<!-- 情况一 -->
  <template #default="{ row }">
      {{ row.role?.name || "-" }}
  </template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<!-- 情况二 -->
  <template #default="scope">
    <el-button type="primary" text @click="handleEdit(scope.row)">修改</el-button>
<!-- 情况三 -->
  <template #reference>
    <el-button text type="primary" size="small">删除</el-button>
  </template>
</template>
</el-table-column>