是否可以在 Vue.js 中为每个实例解析子组件？

Question

我希望能够动态传递子组件。子组件可以根据父组件的实例而有所不同，有没有什么办法可以在不注册全局组件的情况下实现？

这是我想要实现的一个简单示例：

// Component A
export default {
    template: `
        <div>
            <div>Some stuff...</div>
            <component-b :passed-component="passedComponent"></component-b>
        </div>
    `,
    data() {
        return {
            passedComponent: { /* ... */ },
        };
    },
    // Note: passedComponent doesn't necessarily come from `data`
};

// Component B
export default {
    template: `
        <div>
            <div>Some more stuff...</div>
            <component-c :passed-component="passedComponent"></component-c>
        </div>
    `,
    props: ['passedComponent'],
};

// Component C
export default {
    template: `
        <div>
            <div is="passedComponent"></div>
        </div>
    `,
    props: ['passedComponent'],
    components: {
        // How can I register `passedComponent` here?
        // (it can differ per instance of `component-c`)
    },
};

为清楚起见进行编辑：最好传递一个实际的组件对象而不是名称。

Answer 1

编辑：

在你说你想将组件定义作为道具传递之后，即使我想不出用例，我很想知道这是否可行。

原来可以使用async component 功能来完成。

要玩的 JSFiddle：https://jsfiddle.net/rvsbccan/4/

HTML：

<div id="app">
  <test :passed-comp="compDefToPass"></test>
</div>
<template id="test">
  <passed-comp></passed-comp>
</template>

JS：

Vue.component('test', {
  template: '#test',
  props: ['passedComp'],
  components: {
    'passed-comp': function(resolve) {
      resolve(this.passedComp)
    }
  },
})

var vm = new Vue({
  el: '#app',
  data: {
    'compDefToPass': {
      template: '<div>When you see this, we successfully passed down a component definition as a prop!</div>',
      ready: function() {
        console.log('Hello from a prop-passed component.')
      }
    }
  }
})

---

旧回复供参考：

您似乎已经知道的只有两种方法：

• 在全球范围内注册
• 在组件 C 中本地导入和注册 所有可能的组件

如果第二种可能性由于大量导入而令人生畏，您可以将它们提取到另一个模块：

// componentBundle.js
import X from './components/X.vue'
import Y from './components/Y.vue'
// .... and so on...
export default {
  X, Y, ....
}

// component-c.vue
import componentBundle from '../component-bundle'
export default {
  components: componentBundle
}