Vue.jsで複数機能を切り替えで利用する方法

#VueJS

この記事を書いたチーム：frontier

はじめに
子コンポーネント
親コンポーネント
まとめ

はじめに

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

今回取り上げる例はボタン１、ボタン２という２つのボタンを子コンポーネント化し、親コンポーネントで個別に利用する方法を紹介します。子コンポーネントにある各ボタンを個別にコンポーネント化して親にインポートする方法もありますが今回はpropsを用いてコンポーネントの切り替えを行っていきます。機能としてはボタンを押下すると押下されたボタンに応じて表示内容が切り替わるシンプルなプログラムです。

子コンポーネント

まず子コンポーネントでは以下のように記述します。

<template>
  <!-- ボタンA -->
  <button v-if="type === 'buttonA'" @click="childMethodsA">ボタンA</button>
  <!-- ボタンB -->
  <button v-if="type === 'buttonB'" @click="childMethodsB">ボタンB</button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      required: true
    }
  },
  methods: {
    childMethodsA() {
      this.$emit('passMethodA');
    },
    childMethodsB() {
      this.$emit('passMethodB');
    }
  }
}
</script>

</template>

export default {

props: {

type: {

type: String,

required: true

}

methods: {

childMethodsA() {

this.$emit('passMethodA');

childMethodsB() {

this.$emit('passMethodB');

}

</script>

ここでは<button>内でtypeというpropsによって機能を切り替えるif文を追記しています。このpropsが親から渡された値を受け取り判別しています。そして@clickで呼び出された各メソッドの中で$emitを用いて子から親へpassMethodというリスナーを渡しています。

親コンポーネント

一方親コンポーネントでは以下の記述を行います。

<template>
  <Child type="buttonA" @passMethodA="parentMethodsA"></Child>
  <p>ボタンAとボタンBの間</p>
  <Child type="buttonB" @passMethodB="parentMethodsB"></Child>
  <p>{{message}}</p>
</template>

<script>
import Child from './child.vue'

export default {
  components: { Child },
  data(){
    return{
      message:''
    };
  },
  methods: {
    parentMethodsA() {
      this.message="ボタンAが押下されました。";
      //ボタンAのメソッド
    },
    parentMethodsB() {
      this.message="ボタンBが押下されました";
      //ボタンBのメソッド
    }
  }
}
</script>

<p>ボタンAとボタンBの間</p>

<p>{{message}}</p>

</template>

import Child from './child.vue'

export default {

components: { Child },

data(){

return{

message:''

};

methods: {

parentMethodsA() {

this.message="ボタンAが押下されました。";

//ボタンAのメソッド

parentMethodsB() {

this.message="ボタンBが押下されました";

//ボタンBのメソッド

}

</script>

インポートされた<Child>を記述しその中で子へ渡すためのpropsであるtypeをそれぞれ記述します。そして子から渡された@passMethodを親の各parentMethodsに紐づけています。そうして親の実際の処理が書かれたメソッドを呼び出しています。このようにすることでボタンの間に「ボタンAとボタンBの間」といった文や別の処理があっても異なる場所へ機能ごとの利用が可能になります。