Encapsulate the vue element-ui drop-down box component, how to easily inherit all the properties and events of the element-ui drop-down box component?

now there is such a scenario:

the select component of elementui is encapsulated. How to inherit all the properties of the select component of elementui, (Attributes), event (event), and even slots

in the encapsulated component?

template:

<template>
  <div>
    <el-select class="" v-model="_value" :placeholder="_placeholder">
      <el-option v-for="item in _items" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "combo-box",
  data() {
    return {
      _value: "",
      _items: "",
      _placeholder: ""
    };
  },
  computed: {},

  watch: {
    },

  props: {
  },

  mounted() {
  },

  methods: {
  }
};
</script>
<style scoped>

</style>
Feb.11,2022

you can use mixing mixins, elements to use el-table source code, and attributes can be directly mixed. If there are duplicates, this template is the main one.

<template>
  node_modules/element-ui/packages/table/src/table.vue  template
</template>

<script>
  import {Table} from 'element-ui'
    export default {
      mixins: [Table],
      name: "MyTable",
      computed:{
        tableSize() {
          return 'medium';
        },
      }
    }
</script>

there seems to be no way. If you want to re-encapsulate and extend at the same time, try search: extend / inherit component property method

Menu