Vue.js 動態掛載子組件

直接來實例

父組件

<template>
<div>
    <div :is="sub.content" :ref="sub.name"></div>
</div>
</template>
<script>
import subPage from "./subPage.vue";

export default {
    data() {
      return {
        sub: {
          title: this.$t('router.ledgerRuleList'),
          name: 'subPage',
          content: "sub-page"
        },
      }
    },
    components: {
      subPage,
    }
  }
</script>

:is 直接綁定 子組件標簽名稱sub-page