◀ 14.

【Vue.js】Mixinを利用した共通処理の記述方法

▶
編集
この記事の要点
  • Vue.js の Mixin: 複数コンポーネントで共通処理を流用する仕組み
  • 共通処理を別ファイル (Common.vue) に export default {...} で書く
  • 使う側で import Common from "./Common.vue" → mixins: [Common] を宣言
  • Vue 3 はComposition API（useXxx() 関数）のほうが推奨される

 

共通の処理

共通処理用のvueファイルを作成して以下の様に共通化したい処理を記述する。

内容はなんでもよい。

Common.vue

 

 

共通処理を呼び出す処理

mixinsを使用して引数に共通処理のファイルを指定する。

Example.vue

 

共通処理を呼び出す処理を省略する方法

全ての処理で使う場合はmain.jsで指定すればよい。

そうすれば各コンポーネント内で呼び出す必要もなくなる。

main.js

import Common from './Common.vue'

Vue.mixin(Common)

new Vue({
  el: '#app',
  router,
  render: h => h(App),
})
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. インストール(ファイルのダウンロード)
  2. npmを使用したプロジェクトの作成(mac)
  3. for 繰り返し処理
  4. ifの条件分岐とtemplateを用いたグループ化
  5. on:click クリック時のイベント処理
  6. modelとdata フォーム入力値とDOMへの即時反映
  7. computed(算出プロパティ)と使い方とdataとの違い
  8. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  9. $nextTickの使い方(ライフサイクルフック)
  10. メソッドの定義方法
  11. エラー一覧
  12. ルーティング設定
  13. aリンクの貼り方と動的URLの作成
  14. Mixinを利用した共通処理の記述方法
  15. v-bindによるデータ連携
  16. ヘッダー/フッターの共通コンポーネント
  17. ナビゲーションの現在ページをハイライトする方法
  18. 画面サイズの取得方法
2026-05-15 03:52:15 guest 3504

人気ページ

最近更新/作成されたページ