Vue.jsの実用的なヒント

開発時にトリックを使用できれば、開発はよりスマートになり、時間を短縮できます。この記事では、Vuejsの最高のトリックを共有するつもりです。

1つのcomponentを複数のルートで使用する

複数のルートが同じVue componentに解決されることは、開発者が遭遇するかなり一般的な状況です。

しかし、問題は、Vueがアプリを最適化し、新しいコンポーネントを作成する代わりに、既存のコンポーネントを再利用することです。そのため、同じコンポーネントを使用するルート間で切り替えようとしても、何も変わりません。

router.js

const routes = [
  {
    path: "/a",
    component: ArticleComponent,
  },
  {
    path: "/b",
    component: ArticleComponent,
  },
];

これを修正するには、要素に：keyプロパティを追加する必要があります。これはApp.vueファイルにある可能性があります。これは、ページが異なる場合に routerが認識するのに役立ちます。

App.vue

<router-view :key='$route.path' />

これで、アプリは既存のコンポーネントを再利用せず、ルートを切り替えるときにコンテンツを更新します。

小道具をタイプのリストに制限する

プロップ定義で「バリデーター」オプションを使用すると、プロップを特定の値のセットに制限できます。

export default {
  name: 'Image',
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => ['square', 'rounded'].includes(s)
    }
  }
};

この「validator」関数は小道具を受け取り、小道具が有効かどうかにかかわらず、trueまたはfalseのいずれかを返します。

single スコープスロットの省略形

スコープスロットはとても楽しいですが、それらを使用するには、多くの template タグも使用する必要があります。

幸いなことに、それを取り除くための速記がありますが、それは単一のスコープスロットを使用している場合に限られます。

<DataTable>
  <template #header="tableAttributes">
    <TableHeader v-bind="tableAttributes" />
  </template>
</DataTable>

次のように書き直すことができます。

<DataTable #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</DataTable>

シンプルでわかりやすく、すばらしい。

すべての小道具を子コンポーネントに渡す

小道具と言えば、親 componentからその子の1つにすべての小道具を渡す方法を知っておくと便利です。

簡単です。instanceのプロパティを覚えておく必要があります。

<child-comp v-bind="$props"></child-comp>

local スタイルと global スタイルを組み合わせる

通常、スタイルを操作するときは、スタイルを単一の component にスコープする必要があります。

<style scoped>
  .component {
    background: green;
  }
</style>

ただし、ピンチでは、スコープのないスタイルブロックを追加して、必要に応じてグローバルスタイルを追加することもできます。

<style>
  /* Applied globally */
  .component p {
    margin-bottom: 16px;
  }
</style>

<style scoped>
  /* Scoped to this specific component */
  .component {
    background: green;
  }
</style>

v-forでの破壊

v-forで分解できることをご存知ですか？

<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

次のようなタプルを使用することで、v-forからインデックスを取得できることがより広く知られています。

<li v-for="(movie, index) in [
  'Lion King',
  'Frozen',
  'The Princess Bride'
]">
  {{ index + 1 }} - {{ movie }}
</li>

オブジェクトを使用するときは、キーを取得することもできます。

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

また、この2つの方法を組み合わせて、キーだけでなく、プロパティのインデックスも取得することが可能です。

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

カスタムV-model

デフォルトでは、v-model は “@input” イベントリスナーと “:value” プロップに対する構文糖の機能です。実は、どのイベントと値のプロップを使うかを指定できることをご存知でしょうか？Vueコンポーネントにmodelプロパティを指定することで、簡単に指定することができます。

export default{
  model: {
     event: 'change',
     prop: 'checked'
  }
}

複数のv-ifを使用しないでください

条件付きで複数の要素をレンダリングする必要がある場合もありますが、多くの場合、次のようなものを記述します。

<div v-if="condition">content</div>
<div v-if="condition">content</div>
<div v-if="condition">content</div>

もっとエレガントに書けるから不要なんです。

<template v-if="condition">
  <div>content</div>
  <div>content</div>
  <div>content</div>
</template>

Arraysとobjectsを見る

ウォッチャーを使う上で一番厄介なのは、うまくトリガーできないことがあることです。

通常は、ArrayやObjectをウォッチしようとしているのに、deepをtrueに設定していないことが原因です。

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    // Use the object syntax instead of just a method
    colours: {
      // This will let Vue know to look inside the array
      deep: true,

      // We have to move our method to a handler field
      handler()
        console.log('The list of colours has changed!');
      }
    }
  }
}

Vue 3の反応性APIを使用すると、次のようになります。

watch(
  colours,
  () => {
    console.log('The list of colours has changed!');
  },
  {
    deep: true,
  }
);

以上が、vuejsの開発における最高のトリックです。次回は、さらに多くのトリックを紹介する予定です。

By Tsuki