タイトル: Mixinを利用した共通処理の記述方法

SEOタイトル: 【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),
})