v-slot 其简写形式为 #

父组件在引入指定插槽时候,template指定插槽时必须使用 v-slot ,

类似于 v-on 的简写  @

和 v-bind的简写是冒号  :

v-slot 其简写形式为井号   #,比如:

<template>
  <div>
    <Header>
        <h1 slot="a">插槽a</h1>
        <template #c>
            <h1>插槽c 内容1</h1>
            <h1>插槽c 内容2</h1>
        </template>
    </Header>
  </div>
</template>
 


注意: v-slot 属性只支持 <template>标签 

使用示例

表格里第一列内容不是普通文本,增加单选按钮,使用插槽方式

<template>
  <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
      :custom-row="customRow"
  >
    <template #name="{ text }">
      <a>{{ text }}</a>
    </template>
  </a-table>
</template>
<script>
import {computed, defineComponent, reactive} from "vue";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    slots: {customRender: "name"},
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    key: "4",
    name: "Disabled User",
    age: 99,
    address: "Sidney No. 1 Lake Park",
  },
];
export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      selectedRowKeys: [],
    });
    const selectRow = (record) => {
      const selectedRowKeys = [...state.selectedRowKeys];
      if (selectedRowKeys.indexOf(record.key) >= 0) {
        selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
      } else {
        selectedRowKeys.push(record.key);
      }
      state.selectedRowKeys = selectedRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        onChange: (selectedRowKeys) => {
          state.selectedRowKeys = selectedRowKeys;
        },
      };
    });
    const customRow = (record) => {
      return {
        onClick: () => {
          selectRow(record);
        },
      };
    };

    return {
      data,
      columns,
      customRow,
      rowSelection,
    };
  },
});
</script>
<style scoped>

</style>

效果:

Logo

前往低代码交流专区

更多推荐