web-dev-qa-db-ja.com

vue別のコンポーネントをラップし、小道具とイベントを渡します

別の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
}

ここでは、テーブルコンポーネントをラップし、2つの追加の小道具のほかに、ラッパーに渡されたすべての小道具とイベントをテーブルコンポーネントに渡しますprop1およびprop2。 vueでこれを行う正しい方法は何ですか？そして、イベントの解決策もありますか？

javascriptvue.jsvue-componentwrapper
9
user3599803

ラップするコンポーネントをラッパーコンポーネントのテンプレートに配置し、そのコンポーネントタグにv-bind="$attrs" v-on="$listeners"を追加してから、内部コンポーネント（およびオプションでinheritAttrs: false）をラッパーコンポーネントの構成オブジェクトに追加します。

Vueのドキュメントはガイドなどでこれをカバーしていないようですが、 $ attrs 、 $ listeners 、および inheritAttrs のドキュメントが見つかりますin VueのAPIドキュメント 。また、将来このトピックを検索するときに役立つ可能性のある用語は、「 高次コンポーネント "-」です。これは、基本的に「ラッパーコンポーネント」の使用と同じです。 （この用語は、私が最初に$ 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>
16
BDawg