将 vue 组件传递给子组件

Question

我正在尝试创建一个 Vue 组件，该组件将接受一个组件作为参数来显示数据，但我无法弄清楚如何使其工作。如果我全局注册显示组件（使用 Vue.component()），它可以工作，但如果我在本地注册它，我会收到以下错误：

[Vue warn]: Unknown custom element: <my-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

谁能告诉我如何通过本地注册来完成这项工作？

主要组件：

<template>
    <div>
        <my-list :items="items" :renderer="renderer"></my-list>
    </div>
</template>
<script>
import MyList from './my-list'
export default {
    components: {
        'my-list': MyList,
        'my-link': {
            props: { data: Object },
            template: '<span>{{ data.Name }}</span>'
        }
    },
    data() {
        return {
            items: [
                { id: 1, Name: 'One' },
                { id: 2, Name: 'Two' }
            ],
            renderer: 'my-link'
        }
    }
}
</script>

我的列表组件：

<template>
    <div>
        <div v-for="item in items" :key="item.id">
            <div :is="renderer" :data="item"></div>
        </div>
    </div>
</template>
<script>
export default {
    props: { 
        items: Array,
        renderer: String
    }
}
</script>

Answer 1

您看到此警告是因为您尚未在尝试使用它的组件范围内注册 my-link。您在 Main 组件中注册了 my-link，但 MyList 组件无权访问到那个范围。

将 my-link 的组件定义移动到 MyList 组件的 components 属性将解决此问题。

---

或者，您可以为my-link 组件创建一个新的单文件组件，并将其导入到您想要使用的任何位置。就像您对 my-list 组件所做的那样。

---

如果您希望 my-link 组件可全局访问，则需要通过 Vue.component 注册它，无论您在哪里实例化根 Vue 实例（如果您使用 vue-cli 进行设置，则可能在 src/main.js你的项目）：

Vue.component('my-link', {
  props: { data: Object },
  template: '<span>{{ data.Name }}</span>'
});

new Vue({
  el: '#app',
  ...
});

---

如果您真的想要将组件传递给子组件，而不注册到该子组件，您可以按照@BertEvans 的建议pass the component definition as a property。