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>

MyList组件：

<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，但是在MyList中注册了组件无法访问该范围。

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

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

如果您希望my-link组件可以全局访问，那么您需要在实例化根Vue实例的任何地方通过Vue.component注册它（可能在src/main.js中您使用vue-cli来设置项目）：

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

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

如果确实想要将组件传递给子组件，而不注册该子组件，则可以{@ 3}}，如@BertEvans所建议的那样。

将vue组件传递给子组件

1 个答案: