- 追加された行はこの色です。
- 削除された行はこの色です。
[[vue 一覧]]
[[vue一覧]]
* 目次 [#icd49ed4]
#contents
* 概要 [#o060affa]
Vueの共通部品作るときの開設ページは、
２，３種類やり方が、提示されているけど、
一番、自分にしっくりくる、やり方の、指針を書いてみます。
* 参考サイト [#ra9d89af]
** スロットの使い方 [#ne3ff4a9]
https://jp.vuejs.org/v2/guide/components-slots.html
** イベント [#gb6f38ef]
https://jp.vuejs.org/v2/guide/components-custom-events.html
* じゃあ、やってみるか [#ge693ec3]
この記事を書いているのは、2019/08/22です。
よくある、例としては、いったんページをつくって、「あれ、これってほかと、ほとんどいっしょなんじゃない？」というシチュエーションだろう。
typescriptという前提で、以下書いていく。
** 部品の書き方 [#i2056cd2]
部品名を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>
** 使うほうの書き方[#f0eac412]
使うほうが、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>
のようになる
* 部品化した時のイベントの書き方 [#ze876767]
いろいろ、やりかたがあるっぽいんですが、
自分は、以下のやり方で固定しておこうとおもいます。
** 部品の書き方 [#yb253d83]
- $emitメソッドの第二引数に、thisを入れておく
- privateで使っていた classのメソッドは、publicにしておく、
こうすることで、利用側は、第一引数で、部品化したクラスの要素を取得
できる。
ちなみに、extendsしてるんだから、protectedでそのまま、
つかえないかとおもって実験してみたけど、別インスタンスになっているようなので、
Javaとは、違うのだということですね。
- イベント名の末尾に、部品のクラス名を書く
理由は、利用側と、名前が重複すると、IDEに警告されてしまうから。
