vue обернуть другой компонент, передавая реквизиты и события - PullRequest
Новая
       9

vue обернуть другой компонент, передавая реквизиты и события

0 голосов
/ 11 июня 2018

Как я могу написать свой компонент, чтобы обернуть другой компонент vue, в то время как мой компонент-обертка получит некоторые дополнительные реквизиты?Мой компонент шаблона оболочки должен быть: 

<wrapper-component>
   <v-table></v-table> <!-- pass to v-table all the props beside prop1 and prop2 -->
</wrapper-component>

и реквизиты оболочки: 

props: {
  prop1: String,
  prop2: String
}

Здесь я хочу обернуть компонент таблицы и передать в компонент таблицы все реквизиты и событиякоторые были переданы в обертку, рядом с двумя дополнительными опорами prop1 и prop2.Как правильно сделать это в VUE?И есть ли решение для событий тоже?

1 Ответ

0 голосов
/ 11 июня 2018

Поместите компонент, который вы хотите обернуть, в шаблон компонента-оболочки, добавьте v-bind="$attrs" v-on="$listeners" к этому тегу компонента, затем добавьте внутренний компонент (и, необязательно, inheritAttrs: false) в объект конфигурации компонента-оболочки.

Документация Vue, по-видимому, не охватывает это в руководстве или чем-то еще, но документы для $ attrs , $ listeners и inheritAttrs могут бытьнаходится в документации API Vue .Кроме того, термин, который может помочь вам при поиске этой темы в будущем, - « Компонент высшего порядка », который в основном совпадает с вашим использованием «компонента-оболочки».(Этот термин - то, как я первоначально нашел $ attrs)

Например ... 

<!-- WrapperComponent.vue -->
<template>
    <div class="wrapper-component">
        <v-table v-bind="$attrs" v-on="$listeners"></v-table>
    </div>
</template>

<script>
    import Table from './BaseTable'

    export default {
        components: { 'v-table': Table },
        inheritAttrs: false // optional
    }
</script>
...