vue cliでmixinを作成し、インポートする方法
1823 ワード
備忘録です。
したいこと
・vue cliでmixinを作成し、componentファイルで使いたい
同じ動作を複数箇所で使用したい場合は、mixinが便利です。SCSS/SASSで使うmixinと同じ役割です。
Step 1: mixinはjsファイルに書く
mixinはvueファイルではなく、jsファイルに書きます。ここではmyFirstMixin.jsという名前のファイルを作りました。
補足:src のフォルダー内に mixinフォルダー を作成し、その中に mixinを書いたjsファイルたち を保存しておくと管理しやすそうです。
書き方はVueファイルで作ったコンポーネントの、scriptタグの中身と一緒です。ここではcomputedを使ったmixinを書いています。mixinしたい内容を書きます。
myFirstMixin.jsファイル内
export default {
computed: {
filteredBlogs: function(){
return this.blogs.filter((blog) => {
return blog.title.match(this.search);
})
}
}
}
Step 2: コンポーネントファイルで読み込む
component.vueファイル内
<script>
import myFirstMixin from '../mixins/myFirstMixin';//ここでインポートする
export default {
data() {
return {
//
}
},
methods: {
//
},
mixins: [
myFirstMixin
]
}//ここで登録する
</script>
これで使えるようになりました
初心者なので、何か誤解・勘違いがあれば、ご指摘いただけると幸いです
Author And Source
この問題について(vue cliでmixinを作成し、インポートする方法), 我々は、より多くの情報をここで見つけました https://qiita.com/mikumikumikumiku/items/cc551ab4bb4a9006729e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .