📝

Vueのツリー構造のようなコンポーネント作成時の注意点

2023/03/18に公開

Vue.js

tech

注意点

Vueで自分自身を呼び出すようなコンポーネント作成時の注意点
このようなコンポーネントはnameオプションを指定する必要がある

特に注意が必要なのが、指定が漏れていてもデバッグビルド(development)の場合は問題なく動く
リリースビルド(production)の場合に実行時にエラーとなり、対象のコンポーネントが表示されなくなくなる

対処は以下(Vue2かつvue-property-decoratorを使用時の例)

<template>
    <TreeNode />
</template>

<script lang="ts">
@Component({
  name: "TreeNode", ★ここを追加する
  components: {
    TreeNode,
  }
})
export default class TreeNode extends Vue {
// 処理
}
</script>

注意点

Discussion