【Vue.js】componentタグにパラメータを渡す方法

component タグで動的にコンポーネントを切り替えた時に、子コンポーネントのpropsにパラメータを連携する方法を紹介したいと思います。

以下のサンプルコードを見れば分かると思いますが、component タグでパラメータを連携する時は、v-bindディレクティブを使います。

スポンサーリンク

サンプルコード

• 子コンポーネント

パラメータを受け取る子コンポーネントです。
今回は、nameとageの２つのプロパティを用意します。

export default {
  props: ["name", "age"]
}

• 親コンポーネント

親コンポーネントでは、componentタグのv-bindディレクティブに、子コンポーネントに連携するプロパティを設定します。

<template>
  <section class="container">
    <div class="content">
      <component :is="currentView" v-bind="{ name: user_name, age: user_age }"></component>
    </div>
  </section>
</template>

<script>
import  ChildComponent  from  '~/components/ChildComponent.vue'

export default {
  components: {
    ChildComponent,
  },
  data() {
    return { 
      currentView: 'child-component' ,
      user_name: "山田太郎",
      user_age: "91歳"
    }
  }
}
</script>

スポンサーリンク

さいごに

調べみると、割と簡単にパラメータが連携できました。
切り替えるコンポーネント毎に、連携するパラメータが違う場合、もう少し工夫が必要ですね。