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