Question

有没有一种方法可以通过props将组件从父级传递到子级组件，而不必从子级中导入它？

父组件：

<template>
  <ChildComponent :component="componentName">
</template>
<script>
  import componentName from '@/components/componentName.vue'
</script>

子组件：

<template>
   <div>
      <component :is="component">
   </div>
</template>
<script>
  props: {
    component: Object
  }
</script>

当前，在此设置中，我收到未知的自定义事件您是否正确注册了组件？错误。我知道它希望我在子组件中注册该组件，但是我不想从子组件中导入该组件。是否可以通过道具将导入内容传递给孩子？这不可能吗？

Answer 1

您真的很亲密，问题出在您的第一个模板中：

<template>
  <ChildComponent :component="componentName">
</template>
<script>
  // this is not available in template scope
  import componentName from '@/components/componentName.vue'

  export default {
    data: {
      // this, however, is available!
      componentName
    }
  }
</script>

Answer 2

您在误解export default。

parent.vue：

<template>
  <ChildComponent :component="componentName">
</template>
<script>
  import componentName from '@/components/componentName.vue'

  export default {
    data() {
      return {
        componentName
      }
    },
  }
</script>

child.vue：

<template>
   <div>
      <component :is="component">
   </div>
</template>
<script>
export default {
  props: {
    component: Object
  },
}
</script>

如何使导入的组件通过道具？

2 个答案: