vue 共通部品作成
Top / vue 共通部品作成目次 †
概要 †
Vueの共通部品作るときの開設ページは、
２，３種類やり方が、提示されているけど、
一番、自分にしっくりくる、やり方の、指針を書いてみます。
参考サイト †
スロットの使い方 †
https://jp.vuejs.org/v2/guide/components-slots.html
イベント †
https://jp.vuejs.org/v2/guide/components-custom-events.html
じゃあ、やってみるか †
この記事を書いているのは、2019/08/22です。
よくある、例としては、いったんページをつくって、「あれ、これってほかと、ほとんどいっしょなんじゃない？」というシチュエーションだろう。
typescriptという前提で、以下書いていく。
部品の書き方 †
部品名をts/components/aaa/Hogeとするならば、
さらに、部品の引数を title とするならば、
ファイル名、Hoge.vue
<template>
<b-container>
<!-- <h2>部品だよ</h2> -->
<slot name="title"></slot>
</b-container>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class Hoge extends Vue {
}
</script>
使うほうの書き方 †
使うほうが、FugaFuga?.vueだとすると、
<template>
<b-container>
<ケバブ形式のHoge #部品の変数>
差し込みたいコンテンツ
</ケバブ形式のHoge>
</b-container>
</template>
<script lang="ts">
import Hoge from "@/components/commons/Hoge.vue";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component({
components: {
Hoge,
},
})
export default class FugaFuga extends Vue {
}
</script>
のようになる
部品化した時のイベントの書き方 †
いろいろ、やりかたがあるっぽいんですが、
自分は、以下のやり方で固定しておこうとおもいます。
部品の書き方 †
- $emitメソッドの第二引数に、thisを入れておく
- privateで使っていた classのメソッドは、publicにしておく、
こうすることで、利用側は、第一引数で、部品化したクラスの要素を取得
できる。
ちなみに、extendsしてるんだから、protectedでそのまま、
つかえないかとおもって実験してみたけど、別インスタンスになっているようなので、
Javaとは、違うのだということですね。
- イベント名の末尾に、部品のクラス名を書く
理由は、利用側と、名前が重複すると、IDEに警告されてしまうから。
Last-modified: 2019-08-22 (木) 16:24:13 (1709d)