posted: 2018/04/09
Vue.jsのtemplate functionalでcomponentsが認識されないバグがあるのでその対処をする
Vue.jsには
<template functional> というReactで言うところのStateless Functional Componentに近いものがある。が、現状
componentsを認識してくれないバグがあるこんなのが駄目なパターン。
<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>を使う方法が提案されている<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>