LoginSignup
2

More than 3 years have passed since last update.

【Nuxt.js】Nuxt文法編:mixin

Posted at

mixinとは

🎈 この記事はWP専用です
https://wp.me/pc9NHC-s6

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

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

簡単な使い方( js )

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

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

ローカルで使用

スクリーンショット 2020-07-13 14.30.12.png

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

file
mixins/
--| mixin.js
pages/
--| index.vue

【mixin.js】
mixinsフォルダを作成し
その中にmixin.jsを作成

mixin.js
export default {
 created () {
   this.hello()
 },
 methods: {
   hello () {
     console.log('hello from mixin!')
   }
 },
}

【index.vue】
mixinをimportするだけ

index.vue
<template>
 <div class="page">
 </div>
</template>

<script>
import Mixin from '../mixin/mixin.js'

export default {
 mixins: [ Mixin ],
}
</script>

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-s6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2