External Post

posted: 2018/04/09

Vue.jsのtemplate functionalでcomponentsが認識されないバグがあるのでその対処をする

Vue.jsには<template functional>というReactで言うところのStateless Functional Componentに近いものがある。

が、現状componentsを認識してくれないバグがある

https://github.com/vuejs/vue/issues/7492

こんなのが駄目なパターン。

<template functional>
  <div>
    <some-children />
  </div>
</template>

<script>
import SomeChildren from "./SomeChildren.vue"
export default {
  components: {
    SomeChildren
  }
}
</script>

暫定的回避

その1

とりあえず自分が見つけたやり方。Vue.componentで登録してしまう

import Vue from "vue"
import SomeChildren from "./SomeChildren"
Vue.component("some-children", SomeChildren);

export default {}

その2

<component :is>を使う方法が提案されている

https://github.com/vuejs/vue/issues/7492#issuecomment-369507267

<template functional>
  <div>
    <component :is="props.components.SomeChildren"></component>
  </div>
</template>

<script>
import SomeChildren from "./SomeChildren.vue";
export default {
  props: {
    components: {
      type: Object,
      default() {
        return {
          SomeChildren
        };
      }
    }
  }
};
</script>
この記事の修正をする