トップ «前の日記(2019-01-31) 最新 次の日記(2019-02-06)» 編集

2019-02-03 [長年日記]

_ Vueで雑にContainer Component

Container Component が何かはあえてとりあえず省略。

こんな感じかな

Presentational Component

<template>
  <button @click="$emit(event, arg)">{{button_name}}</button>
</template>

<script>
export default {
  props: ['button_name']
}
</script>

<style>
  ..
</style>

Container Component

<template>
  <presentational
     @event="handler"
     :button_name=button_name />
</template>

<script>
import './Presentational'

export default {
  components: {
    Presentational
  },
  data() {
    return {
      button_name: 'default'
    }
  },
  methods: {
    handler(arg) {
    }
  }
}
</script>

Presentational では methods を持たず、$emit で Container 側に丸投げする。data は独自に持たずに props で受け取る、という形が Vue.js でいちばん雑に実装したものになるかな。

参考