Vueと共通

【Nuxt.js】Nuxt文法編:mixin


mixinとは

再利用可能な部品たちを
まとめて書いて使いまわせるもの✨
変更したい時はmixinだけ変更すればOK🙆‍♀️
管理がとっても便利になります!

実際に例を見ていきましょう👀


簡単な使い方( js )

jsファイルを使いまわしてみます🌟

グローバルで使用することはないので
ローカルでご紹介🎀🧸


ローカルで使用

ただconsoleを出すだけのシンプルなもの

directory

mixins/
plugins/
--| mixin.js

pages/
--| index.vue

) file

mixinsフォルダを作成し
pluginsの中にmixin.jsを作成

) pages

mixinをimportするだけ


コンフリクトが起きた場合はマージされる


解説

bar:
mixinにない、
コンポーネントの'def'がそのまま反映される

foo:
mixinのみにあり、
コンポーネントと重複せずそのまま反映される

message:
mixinにも
コンポーネントにもあるため
コンポーネントの'goodbye'が優先される

ポイント

mixin.jsとindex.jsで
重なった(コンフリクトした)部分
data.messageが統合(マージ)され
コンポーネントのdataが優先されます🌟

data以外でもオブジェクトで値を使うオプション
methods, coponents, directivesも
同様にマージされます🎀


コード

) file

) pages


同じ名前のフック関数の呼び出し

関数の場合は全てが呼び出されます。
配列にマージされているので
2つが1つになるのではなく
[0, 1, 2...]と増えていきます🌟

ミックスインのフックは
コンポーネント自身のフックに呼ばれます。


コード

) file

) pages


簡単な使い方( scss )

jsではなくスタイリングを使いまわしてみます🌟
ローカルで使用することはあまりないので
グローバルでご紹介🎀🧸

cssではできず、
scssを使う必要があります!
導入方法は別記事を出します…!


グローバルで使用

今回は視覚的に分かりやすく
円を例にしてます 🔴 👀
複数のスタイルを
共通化できたら便利ですよね?💕

書き換えるのはmixinだけで良い!
って、とっっっても楽ちん🎨✨

参考記事
https://www.webcreatorbox.com/tech/sass-mixin

ポイント

Sassとの相性もよく、
Sass変数とmixinを使って
レスポンシブ 対応のmedia queryにも
活かすことができます🌟

別記事で出す予定です🎀

directory

assets/
--| scss/
-----| _mixin.scss

pages/
--| index.vue

nuxt.config.js


コード

) file

nuxt.config.js でグローバルに💕
styleResourcesは拡張子の種類を
分けて記載しなければいけません✂︎

) assets

@mixin で使い回すスタイルを定義

) pages

@includeで
mixinを呼び出すだけ🌟


終わりに

mixin & Sassのメディアクエリ
別記事で出すのでお楽しみに🎶

実際の使い道としては
これが1番だと思います!!

yossy

jsファイルでmixin…
イマイチ使い道が分かりませんでした笑

こう使うと良い!
などご存知の方いらしたら
教えていただけると嬉しいです🙇‍♀️✨

-Vueと共通
-,

© 2024 aLiz Nuxt