[[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に警告されてしまうから。
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS