【Vue(Nuxt)】v-ifとpropsで子コンポーネントの表示制御を行う

おすすめのオンラインプログラミング学習

v-ifやifで親コンポーネントからで子コンポーネントの表示制御を行う方法です。覚書も多少かねています。

v-ifとpropsでで子コンポーネントの表示制御を行う(方法1)

子コンポーネント

まず、子コンポーネントをv-ifで切り分け、親コンポーネントとデータのやりとりをするためpropsを用意しましょう、

    <b-container fluid="xl">
      <b-row v-if="showA" class="my-2 py-2">
        <b-col cols="12">表示A</b-col>
      </b-row>
      <b-row v-if="showB" class="my-2 py-2">
        <b-col cols="12">表示B</b-col>
      </b-row>
      <b-row v-if="showC" class="my-2 py-2">
        <b-col cols="12">表示C</b-col>
      </b-row>
    </b-container>

htmlはbootstrapvueを使っているため、適時書き換えてください。

  props: {
    showA: {
      type: Boolean,
      default: true
    },
    showB: {
      type: Boolean,
      default: true
    },
    showC: {
      type: Boolean,
      default: true
    }
  },

defaultをfalseにすると、その部分が非表示になります。

親コンポーネント

次に親コンポーネントです。

      <Childcomponents
        :show-a="showAToChild"
        :show-b="showBToChild"
        :show-c="showCToChild"
      />

ハイフンを使いなさいとwaringででたため命名はハイフンにしました。ケバフケースにします。

falseにしたものだけ消えます。

import Childcomponents from '~/components/Childcomponents.vue'

export default {
  components: {
    Childcomponents
  },
  data() {
    return {
      // 子コンポーネントの表示管理
      showAToChild: false,
      showBToChild: true,
      showCToChild: false
    }
  }
}

propsはこちらの記事がわかりやすいです。

【Nuxt.js】props基礎編:コンポーネントに自由にデータを渡そう | aLiz Nuxt
前置き componentの内容を、ページによって変えたいってこと、ありますよね?親によって文字を変えたり、b ...

あとはUdemyなどで勉強しましょう。

【udemyで大人買い】vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしています。若干、個人的な覚書もかねているためお役立ち記事にしていきたいです...

親ページの2ヵ所から1つのファイルにある違う子コンポーネントを読み込む

レイアウトや他のコードの都合上、コンポーネントを読み込む箇所が2箇所になってしまう場合です。
子コンポーネンを以下にするだけです。親側は各々falseに設定するだけです。

<div v-if="this.$route.name === 'PageName' && partsA">
</div>
<div v-if="this.$route.name === 'PageName' && partsB">
</div>

propsは配列や関数を渡す場合は注意

型だけの場合はこう。

props: {
  propArray: Array
},

中には型を指定していないコードもありますが、基本型は指定することが多い気がします。defaultも指定しないとeslintのエラーがでるため、、結局、typeとdefaultの両方は指定することが個人的に多いですね。

アロー関数なので配列や関数を渡す場合は若干注意が必要です。

default: () => {}

ボタンclick時にpropでデータをゲットする

違うところは、子コンポーネントはcomputedで監視します。

vue(nuxt)でcomputedの呼び出しタイミングなど【使い方まとめ】
vue(nuxt)のcomputedとwatch覚書です。 vue(nuxt)でcomputedの呼び出しタイミング【使い方】 computedの呼び出しタイミング computed: { test() { ...

emit

emitは細かい説明は割愛しますが、子から親に渡します。

udemyの「超Vue JS 2 入門 完全パック – もう他の教材は買わなくてOK! (Vue Router, Vuex含む)」をめもがわりに使わせてもらっています。わかりやすかったので。

【udemyで大人買い】vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしています。若干、個人的な覚書もかねているためお役立ち記事にしていきたいです...
スポンサーリンク

親のページ名でif文の切り分け(方法2)

値のやりとりがない場合、親のページ名で子コンポーネントを切り分けることもできます。

htmlとjsは各々次のとおりです。こちらは記述量が少なく簡単です。実は表示と非表示の制御だけならこっちでいいかも。

<div v-if="this.$route.name === 'parentPagename'">
親ページに表示するもの。
</div>
<div v-else>
その他のページに表示するもの。
</div>
if(this.$route.name === 'parentPagename'){
  console.log('this.$route.name(ページ名)', this.$route.name)
}
スポンサーリンク

コンポーネント設計の記事参考

よさそうな記事があったので紹介だけ。

スポンサーリンク

classの条件分岐

おまけです。classの条件分岐は、いろいろな方法がありまますが、三項演算子を使う場合が多くシンプルですね。

<div :class="getData.name.includes('neru') === true ? 'bule' : 'green'">色変え</div>

あとは.bule{}と.green{}の2つのスタイルを用意すればOKです。

参考になれば幸いです。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました