vue一覧

目次

概要

Vueの共通部品作るときの開設ページは、

2,3種類やり方が、提示されているけど、

一番、自分にしっくりくる、やり方の、指針を書いてみます。

参考サイト

スロットの使い方

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>

のようになる

部品化した時のイベントの書き方

いろいろ、やりかたがあるっぽいんですが、

自分は、以下のやり方で固定しておこうとおもいます。

部品の書き方

こうすることで、利用側は、第一引数で、部品化したクラスの要素を取得

できる。

ちなみに、extendsしてるんだから、protectedでそのまま、

つかえないかとおもって実験してみたけど、別インスタンスになっているようなので、

Javaとは、違うのだということですね。

理由は、利用側と、名前が重複すると、IDEに警告されてしまうから。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-22 (木) 16:24:13 (87d)