我们能把element加上‘element’组件(用复合api构建)扩展到我们的自定义组件并使用它们的道具吗？

Question

我是vue3的新手，在vue 2版本中，“element”使用了"ElTree“组件上的"option”，这样我就可以在我的自定义组件中扩展'ElTree‘，并访问'ElTree’道具，比如'root，dragState‘。但是现在'element-plus‘库使用了"composition“，所以我无法扩展"ElTree”并访问道具’根，dragState‘。

我现在该怎么做？我可以扩展"ElTree“组件吗?还是必须直接从'element-plus‘中使用'ElTree’组件？

Answer 1

是。

您可以想象，我希望扩展el-table以创建名为XTable的新组件，并使用其props.data

//XTable.vue
<template>
    <el-table
      v-bind="$attrs"
      :data="formatedData"
    >
      <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope || {}" />
      </template>
    </el-table>
  </template>
  
  <script lang="ts" setup>
  import { ElTable } from "element-plus";
  
  const props = defineProps({
    data: { type: Array<any>, required: true },
  });
  
  const formatedData = computed(()=>{
    return data.map(...)
  })
  </script>

使用<el-table>.

• Extend扩展组件的道具:使用v-bind="$attrs"将所有属性从<xtable>传递到<xtable>组件的插槽:使用<template v-for...来放置插槽。

• 使用它们的道具:为XTable定义相同的道具名称data，并将格式化的道具传递给el-table.自定义$attrs对象(在Vue3中)包含组件的支柱或发布选项(例如类、样式等)未声明的所有属性，您应该在XTable中手动定义并将其传递给el-table

。