【Nuxt.js】Nuxt文法編：component③動的コンポーネント

前置き

liを使いまわして親のulによって
中のテキストを変えたりしたい！
というような場合に便利なkey属性をご紹介🌟

⬇️今までの記事はこちら
【Nuxt.js】Nuxt文法編：component①
【Nuxt.js】Nuxt文法編：component②動的コンポーネント

⬇️以降はこちら
【Nuxt.js】Nuxt文法編：component④

<ul>、<ol>、<table>、<select>といった要素には
子要素にできるタグ<li>、<tr>、<option>が
決まっていますね。
これらを分けてコンポーネント化したい場合に
活躍するのがkeyです。

公式: https://jp.vuejs.org/v2/guide/components.html#DOM-テンプレートパース時の警告

keyに使う値については
こちらをご覧ください👀

【Nuxt.js】Nuxt文法編：v-for

tableでいうならthは親、
trを子コンポーネントに分けると
管理がしやすいといったメリットもあります💡

コード①

liタグに使うコンポーネントは
is属性で指定してあげます🌟

) components

<template>
  <li>{{ text }}</li>
</template>

<script>
export default {
  props: ['text']
}
</script>

</template>

export default {

props: ['text']

}

</script>

) pages

<template>
  <div class="page">
    <ul>
      <li
        is="ListItem"
        v-for="(fruit, index) in fruits"
        :text="fruit"
        :key="index"
      >
        {{ fruit }}
      </li>
    </ul>
  </div>
</template>

<script>
import ListItem from '~/components/Lists/ListItem.vue'

export default {
  data () {
    return {
      fruits: ['りんご', 'みかん', 'ぶどう'],
    }
  },
  components: {
    ListItem,
  },
}
</script>

<ul>

<li

is="ListItem"

v-for="(fruit, index) in fruits"

:text="fruit"

:key="index"

</li>

</ul>

</div>

</template>

import ListItem from '~/components/Lists/ListItem.vue'

export default {

data () {

return {

fruits: ['りんご', 'みかん', 'ぶどう'],

}

components: {

ListItem,

}

</script>

コード②

liのコンポーネントを作って
親でulタグの中にコンポーネントを入れる…
こうなりますね💡

) components

<template>
  <li>{{ text }}</li>
</template>

<script>
export default {
  props: ['text']
}
</script>

</template>

export default {

props: ['text']

}

</script>

) pages

<template>
  <div class="page">
    <ul>
       <ListItem
        v-for="fruit in fruits"
        :text="fruit"
        :key="index"
       >
        {{ fruit }}
       </ListItem>
    </ul>
  </div>
</template>

<script>
import ListItem from '~/components/Lists/ListItem.vue'

export default {
  data () {
    return {
      fruits: ['りんご', 'みかん', 'ぶどう'],
    }
  },
  components: {
    ListItem,
  },
}
</script>

<ul>

<ListItem

v-for="fruit in fruits"

:text="fruit"

:key="index"

</ListItem>

</ul>

</div>

</template>

import ListItem from '~/components/Lists/ListItem.vue'

export default {

data () {

return {

fruits: ['りんご', 'みかん', 'ぶどう'],

}

components: {

ListItem,

}

</script>

自動インポートにすると

pathや登録をせずに自動インポートすると
タグがliではなくそのコンポーネント名になりました。
そもそもliタグにisでバインドさせなければ
ならないのでこの書き方は絶対にしないのですが
参考程度に。

まとめ

自作コンポーネントについてはここまで。
お疲れ様でした🍀🤗

コンポーネントを作成しインポートすれば使用可能。
動的に使いたい場合は
key属性または
componentタグと一緒にis属性を使用…
おおまかにこんな感じです✨

次からは<nuxt />や<nuxt-child />について
解説していきます❣🙋‍♀️