[[vue一覧]] * 目次 [#icd49ed4] #contents * 概要 [#o060affa] Vueの共通部品作るときの開設ページは、 2,3種類やり方が、提示されているけど、 一番、自分にしっくりくる、やり方の、指針を書いてみます。 * 参考サイト [#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に警告されてしまうから。