将 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尝试使用该组件的组件范围内注册。您已my-link在 Main 组件中注册，但 MyList 组件无权访问该范围。

将 的组件定义my-link移至componentsMyList 组件的属性将解决该问题。

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

如果您希望该my-link组件可全局访问，则需要通过Vue.component实例化根 Vue 实例的任何位置（可能是在src/main.js您用于vue-cli设置项目的情况下）来注册它：

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

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

如果您确实想将组件传递给子组件，而不注册到该子组件，则可以按照 @BertEvans 的建议将组件定义作为 property 传递。