Functional Component Vue Sample

FunctionalComponentVueSample.ts

import Vue from 'vue'

/**
 * DListコンポーネント
 * dtタグとddタグに中身の要素を設定して返却する
 * 以下のようなdomが出力される
 * <dt class="col-sm-3">名前</dt>
 * <dd class="col-sm-9">田中太郎</dd>
 */
const DList = Vue.component('DList', {
    functional: true,
    props: {
        dt: { type: String, required: true },
        dd: { type: [String, Number], required: true }
    },
    render: (createElement, { props }) => {
        const createData = (className: string) => ({ attrs: { class: className } })
        const _dt = createElement('dt', createData('col-sm-3'), props.dt)
        const _dd = createElement('dd', createData('col-sm-9'), String(props.dd))
        return [_dt, _dd]
    }
})

// あとはVue.extendを使って、書いてあげる
// export default Vue.extend({
//  components : {DList}
// })