Help us understand the problem. What is going on with this article?

[Vue.js] htmlタグと重複するコンポーネント名の命名規則をどうするか

More than 3 years have passed since last update.

Vue.jsでコンポーネントを作成するときにHeader.vueなどhtmlタグとかぶってしまうコンポーネント名をつけたいときにどうすれば良いのか困ったので調べてみました。

調べた限りだと以下の3つのパターンが存在します。

1. htmlタグとかぶるコンポーネントはそもそも作らない

Vue.jsの公式でも紹介されているvue-hackernews-2.0をみて見ると、headerなどのhtmlと被りそうなコンポーネントは存在しません。

https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/App.vue

個人プロジェクトや小規模の案件だと問題なさそうですが、ヘッダーやフッターをコンポーネントに切り出したい場合もあると思うのでちょっと微妙です。

2 . AppNameHeader.vueのようにprefixをつける

AppAppName のようにprefixをつければhtmlタグとの名称の衝突を回避できます。

ただ、すべてのコンポーネントにprefixをつけるのもめんどくさく、htmlタグと重複するものだけにprefixをつけるのも微妙ですね・・・

3. htmlタグと重複したコンポーネント名を許容しつつコンポーネントを読み込むときに任意の名前をつける

Header.vue を作成して、コンポーネントを読み込むときに v-header などとします。
App.vueを以下のようにするイメージです。

<script>
import Header from '@/components/Header'
export default {
  name: 'app',
  components: {
    'v-header': Header
  }
}
</script>

AppNameHeader.vueのようにprefixをつける

と発想は同じですが、こちらの方がコンポーネント名もすっきりするので今のところこの方法が1番良いかなと思っています。( v- とするとVue.jsの機能かな?と読み手が感じるケースがあるかもしれません)

この3つ以外の方法があったり、これがベストプラクティスだ!という方法があれば教えて欲しいです。


この記事は[Vue.js] htmlタグと重複するコンポーネント名の命名規則をどうするかからの転載です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした