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
}

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

1 个答案: