M
M
Mad Coder2022-02-15 11:18:46
Vue.js
Mad Coder, 2022-02-15 11:18:46

How to get rid of unnecessary props in component :is?

Good time! Faced such a problem, there is a dynamic component into which a bunch of props are thrown, but in the example below there are three components that are thrown dynamically. Let's call them conditionally Component1, Component2 and Component3. The dataOpenPosition prop is needed in Component1, but if I do not specify it as a prop in Component2 and Component3, then it is hung as an attribute on the root div and it turns out terrible. Of course, I can specify this prop in all components, but I don’t want to specify unused props.
If there is another solution I will be very grateful!

keep-alive
            component(
                :languageRender="languageRender"
                :is="selectedTable"
                :dataOpenPosition="dataOpenPosition"
                :dataClosedPosition="dataClosedPosition"
                :dataProfit="dataProfit"
                :darkClass="darkClass"
                :isLoadingtableData="isLoadingTableData"
                @contentReady="contentReady"
                @closedPosition="closedPosition"
                @onOptionChanged="onOptionChanged"
                )

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2022-02-15
@polyak-y

Move parameters that are not defined for all components into a separate object that will be created dynamically:

computed: {
  selectedTableProps() {
    /*
     * возвращаете объекты c различными наборами свойств,
     * в зависимости от значения selectedTable
     */
  },
  ...

component(
  v-bind="selectedTableProps"
  ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question